Why does white space appear on the right side of my screen when I use display none?

[sethrpabst]

So at a max-width of 775px I want to remove the left and right deigns on the menu section. I used @media screen and (max-width: 775px) { .menu-section .design-left, .menu-section .design-right { display: none; } to do this. However when I remove these designs, white space appears suddenly on the right side of the document. using my devtools and hovering over it I couldn’t find anything why is that? What’s causing this? And how did you go about finding the problem? Issues like this have happened a few times and just hovering over the whitespace doesn’t always work. Thanks for the help:)

Edit fiddle - JSFiddle - Code Playground

[PaulOB]

@sethrpabst

However when I remove these designs, white space appears suddenly on the right side of the document.

That’s because the right-20px of .food-wrap is now outside the viewport and causes a horizontal scrollbar.

.food-wrap {
    	right: -20px;
 }

You can’t place anything outside the right of the viewport (apart from fixed elements) without it incurring a scrollbar in order to view the item. When you scroll the white-space is just empty space because the design would stop at 100% but when you scroll passed 100% there is nothing there except for that element you accidentally placed off screen

[PaulOB]

@sethrpabst

And how did you go about finding the problem? I

If hovering the element in devtools doesn’t give you a clue then the method I use is to turn whole blocks off with display:none (in devtools) and then see when the problem occurs or disappears. In that way you can narrow the problem down quite quickly and see the exact place it occurs and then it usually becomes obvious what’s causing the problem (mind you I have had lots of practice and can spot these things very quickly :)).