Unexpected larger margin

Hi

I have a #header{ margin:0 auto 20px;} here http://pintotours.net/TEMP1/test.html

when the query kicks in at @media screen and (max-width:985px) {

#wrapper,
    #main
    {
       display: block;
       width: auto;
    }}

the margin becomes much bigger, and it has nothing to do with the #header. Why?

Thanks

EDIT

In fact, I’ve just realized that the margin is the same. It is the top of #main that gets this black area.

I think it has to do with the margin-top here, but why?

#main .text2 p{
font-family: 'Roboto', Helvetica, arial, sans-serif;
font-weight:700;
font-size:26px;
text-align:center;
line-height:40px;
margin:50px auto 0;
max-width:85%;
}

It’s to do with “margin collapse” (you can google that). One fix is something like

#main {border-top: 1px solid white;}

1 Like

Thank you Ralph

It’s fixed!

Cool. I encourage you to read about margin collapse, as it’s an important thing to be aware of.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.