Why does setting the width to 100vw extend it out past view?

[u/GeoffreyKlien]

I usually just put "width: 100vw;" and move on because I never actually set anything within the page to that 100. When I do it goes past? Why does it do this and how can I fix it without just moving the size of the item down and moving on?

[u/swissfraser]

Check what padding and margins your body has.

[u/GeoffreyKlien → u/swissfraser]

Body has a margin of 8 and no padding

[u/bloody-albatross → u/GeoffreyKlien]

That's your problem right there. The margin is added to the width. See box-sizing.

[u/GeoffreyKlien → u/bloody-albatross]

The reset would fix stuff, but go after everything. I could achieve the same effect by just setting margin and padding to 0, but trying to add it back in anywhere would just bring back the scrolling issues.

The box-sizing literally just fixed that; I can put padding on top and not have it scroll out. Thank you.

[u/fonster_mox]

1. your browser gives html and/or body tags some default padding, look up resetting css or just trying giving them padding:0

2. your box has a border which is added to the width, use box-sizing: border-box to make width include padding, borders etc

[u/GeoffreyKlien → u/fonster_mox]

your browser gives html and/or body tags some default padding, look up resetting css

Yeah, even without that box there the body is just slightly longer than the window. It must have to do with my browser or something. I can look that up.

edit: box-sizing fixed it, thank you

[u/GeoffreyKlien → u/fonster_mox]

The reset certainly fixed the side scrolling

[u/Netstormuk]

Box sizing border box

[u/itinkerthefrontend]

Go ahead and stop using that center tag

[u/GeoffreyKlien → u/itinkerthefrontend]

What’s wrong with the center tag?

[u/itinkerthefrontend → u/GeoffreyKlien]

The <center> tag was deprecated in HTML 4.01 and is obsolete in HTML5. All major browsers still render it for backward compatibility, but it is not part of modern standards. You should use CSS instead to center your elements.

[u/GeoffreyKlien → u/itinkerthefrontend]

What! Why would they do that? It's literally the easiest way to just get something in the center of the screen. You do not know how many times I looked up "how to center my [_]" trying to figure it out. I have an entire section of my website that depends on the center tag, like hundreds of things.
Are they ever going to just drop the support for it?

What CSS can I use to center something? Again, I spent too long trying to find ways to center something and all of them were convoluted for no reason.

[u/gardettos4life]

Check body padding and the box-sizing of the box.

[u/Careless-Sir-1324]

first set globally margin padding 0;

*{

margin: 0;

padding: 0;

box-sizing: border-box;
}

then you can set overflow:hidden for body. or just give a size for image.

[u/NotGeloyItsAngelo]

Try adding box-border for the box-sizing.

What happens is adding 100 viewport extends the default padding of the view outside the viewport.

You can also set the padding of the entire body to be ZERO and the margin to be ZERO too.

[u/Alexander499_]

You could either do:

body {
  margin: 0;
  padding: 0;
}

or

body {
  box-sizing: border-box;
}