Flexbox container sizes differently from the rest of the page

HTML-CSS
1

I am using a variable (–width: 90vw;) to set the width of all main elements on my page. The width of my flexboxes (.projects-container) is set using the same variable, but they are consistently wider than the other elements.
I have already checked, and none of the children are wider than the width I am trying to set.

I have set the borders of the offending flexboxes to cyan to help with troubleshooting.

https://codepen.io/rcotter/pen/LYNNdze

2

Hey Ray,

nice to meet you!

This is caused by box-sizing:

By default in the CSS box model, the width and height you assign to an element is applied only to the element’s content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that’s rendered on the screen.

You can solve this by changing the box-sizing to border-box for every element. (Try to solve this yourself.)

1 Like
3

Thank you so much Miku! This was just the right amount of direction, and your quick response helped me keep my momentum. Setting box-sizing to border-box fixed most of the issue.

The other problem is that I had set the width to 100vw. Since this uses the full horizontal resolution of the display, my page no longer fit along the X-axis once the vertical scroll bar was factored in. Setting width to 100% fixed this.

1 Like