IE では main 要素の display は inline なので注意する

マイクロソフトの許可を得て使用しています。Microsoft.com をご覧ください。

HTML5 から追加された要素 main ですが、レイアウトに導入するには注意が必要です。 IE9 ~ IE11(開発者ツール上は Edge 表記)では、main 要素の display プロパティの規定値は inline です。 したがって、ページ全体の構成を main 要素で指定する場合には、main 要素に display:block を指定する必要があります。 Chrome や FireFox などは、main 要素の display プロパティの規定値は block ですから、重複する指定になりますが、IE のために回避できません。

main 要素に対して margin や padding が効かないときや、float や width が期待したとおりに動作しないときは、 main 要素の display プロパティを確認します。