Page extends past edge of screen

Question

This is the second time I have run into this issue and I am about to pull my hair trying to fix it. I am creating a website and just getting on the beginnings of it. In the css I set the margins and the padding for the html and body tags to 0 and the page extends past the right edge of the screen.

I tried modifying the css for these elements to include a 100% width, but the horizontal scroll bar is still there and the page is still past the edge of the screen.

I also tried setting the overflow value to hidden, but just as expected, that only took away the scroll bar. It was obvious the page was still extended past the right edge of the screen.

Any thoughts?

Answer 1

You have a padding in addition to the 100% width.

Div elements take up all the horizontal space available so you don't really need the width property here. Taking it out would fix the issue. Additionally, you can change the box-sizing property of the element

box-sizing: border-box;