How to set full width for items

Hello community, I am trying to set the gray background to be the size of the screen, but the width property doesn't seem to do that.
Any links or ideas are welcome.

Zoë•10/10/23, 2:54 PM

100% is full width of the container, the container is not the width of the screen

FlaviuOP•10/10/23, 3:21 PM

Sorry do you mind elaborating a bit further?
I had a look online to see how to set the elements based on the resolution but I didn't get a lot from that.

Zoë•10/10/23, 3:33 PM

It entirely depends on the layout of your HTML. I don’t have a link to it to pin point where the issue is.

I see you’re using flex which by default stretches children in the perpendicular axis. If what you have is flex box all the way down you may accidentally have a row one at the root.
Or you have set a width or a max-width somewhere.

Chaves•10/10/23, 3:33 PM

You can size the element according to the width of the viewport using 100vw or use 100%, using 100% the element will use the entire width of the parent element, in this case if the parent of your element is the BODY of your html , it will extend across the entire screen.

Chaves•10/10/23, 3:34 PM

I personally only use the VW measurement in the font-size property, the best option in my opinion is to size it according to the body of the document, using the percentage.

Chaves•10/10/23, 3:37 PM

When you use 100vw to add a color to the element body, it creates a side scrollbar, you can remove it using overflow-x: hidden

Zoë•10/10/23, 3:50 PM

You should never use I can't think of any legitimate reason to use it. Things being block and already taking up as much width as it can is enough.
Also you should never use to bodge fixes. If you have an unexpected overflow, fix it, don't hide it

FlaviuOP•10/10/23, 3:54 PM

Thank you @Chaves and @z- ::theProblemSolver:: for some reason I didn't think about the width of the parent element but now it makes a lot more sense.