How to add color to 100% width, including margins

Hello everyone!
Currently, I’m making one-page mock up project just to practice my coding skills. But I’ve got stuck with adding color to 100% width of the page.
I want my page to look approximately like this:

But, I’ve centered all the content on the page using width and margin properties:

main {
width: 1200px;
margin: 90px auto;
}
.image-bar {
background-color: lightgray;
padding: 30px;
}

It ended up looking like this:

My question is: How to add color to all the width of the page, if the element (.image-bar) inherits margins from its parent container (main)?

Is the width of the screen 1200px? Try setting width to 100%, and making sure there isn’t any padding/margin/border on the left/right of the .image-bar element.

Hi @nastyyvolk
The second screenshot shows that your viewport is 1920px wide while your .main container is limited to 1200px.
So you should set your .main container to width: 100% as @codeneutrino says. I’d add that you then should limit the .image-bar element to 1200px (max-)width and set it to margin: auto. The background-color: lightgray should be on the .main element.


.main {
width: 100%;
margin: 90px 0;
background-color: lightgray;
}
.image-bar {
max-width: 1200px;
margin: 0 auto;
padding: 30px;
}
2 Likes

Thank you, that worked out :slightly_smiling_face:

1 Like