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

[asmjota]

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!

[MatchaCrisp]

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.

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

[asmjota]

It worked just fine!

Thank you very much!