<main> element doesn't show padding in Opera, Safari, IE

Question

I have the html5 element in my project and given it a padding. Firefox and Chrome show the padding correctly, but unfortunately Opera, Safari and IE don't.

Do you have any experience with this issue and know how to solve it?

It is not happening due to my reset.css, and I was able to reproduce the error in a simple fiddle. Just check it in the named browsers to see the difference.

FIDDLE

And here is the example code.

HTML:

<section class="wrapper">gets padding everywhere</section>
<main class="wrapper">gets no padding in the mentioned Browsers</main>
<section class="wrapper">gets padding everywhere</section>

CSS:

.wrapper {
    padding: 8em 0;
}

Thank you!

Answer 1

It looks like IE, Opera etc don't treat the <main> tag as display block. I added css to force it and it worked in all the browsers you talked about here

main.wrapper{
    display: block;
}