[Resolved] Margin to sides of Header gives unexpected results

[Stephen]

I’m using the CSS below to style the header with a margin at the top which works fine.

However if I add: margin-left: 10px ; or: margin-right: 10px ; then I get an unexpected result where the header is no longer centred and also no longer ‘contained’.
(ie it goes wider than contained width and floats off to one side.)

@media (min-width: 851px) {
.site-header {
margin-top: 20px;
border: 1px solid #DDDDDD;
}
}

[David]

Hi there,

thats correct, to center an element we use margin-left: auto; and margin-right: auto; so by adding a value you break that.
Instead try reducing the site header max-width:

@media (min-width: 851px) {
    .site-header {
        max-width: 1280px;
        margin-top: 20px;
        border: 1px solid #DDDDDD;
    }
}

That makes it 20px narrower then the site container ( 1300px ) which will shift it over.

[Stephen]

Hi, super that does explain it.

I’ve used the CSS below as suggested which does fix the max width problem but the header is not staying in the site container and is off on the left side when over 1300px wide.

.site-header {
max-width: 1280px;
margin: 20px 10px 0 10px;
border: 1px solid #DDDDDD;
}

[David]

You need to change:

margin: 20px 10px 0 10px; to just margin-top: 20px;

[Stephen]

Great thanks, that gives the margins at 1300px +

So I can use different CSS for different screen sizes ?

@media (min-width: 1300px) {
.site-header {
max-width: 1280px;
margin-top 20px;
border: 1px solid #DDDDDD;
}
}

@media (min-width: 851px) and (max-width:1299px){
.site-header{
margin: 20px 10px 0 10px;
border: 1px solid #DDDDDD;
}
}

[David]

Correct 🙂

[Stephen]

great thanks

[David]

You’re welcome

[Author]

Posts