How to make the side padding work correctly with 100% width?

Hi everyone!

I’m building the Product Landing Page project, and when I was making the header, I had a problem with the padding.

Here’s the link: https://codepen.io/asmjota/pen/BaQbVKo

Currently, the padding of the header looks like this:
padding: 0 100px;

This causes everything in the header to be moved only to the right.
The only way I was able to solve this was by changing the width from 100% to any other value in px, such as 1000px.
But that doesn’t solve it, because I would like the header to be responsive.

Anyway, does anyone have any solution for this problem?
I would love to understand why this is going wrong, so that I wouldn’t go through it again.
And if you have any other suggestions for changing the code in any other way, I’m all ears.

Thank you!

Hi! This is a classic problem stemming from how CSS calculates the width of any element by default.

Here is a box model look at any HTML element, this is what CSS sees when it tries to render and place the elements.
box_model

by default, CSS calculates the width of any element as its content. This unfortunately means if you set any element to 100% width of its parent, and add a padding/border/margin, those are extra and make the child overflows the parent container, as seen in your header.
You can change how CSS calculates width by setting box-sizing:border-box; property in the relevant selector. This way CSS width is content, padding, and border combined.

Personally I set box-sizing:border-box; to all elements since I find that easier to conceptualize in my head.

Here is some reading on box-sizing at MDN

1 Like

It worked just fine!

Thank you very much!