The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Padding is creating unwanted whitespace to the right

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #192466

    I am trying to make a div which is width:100%; sit 30px within the left and right edges of the browser – which is working…

    But unfortunately when applying padding-left:30px; and padding-right:30px; to the div I am getting 30px of unwanted whitespace appearing to the right of the div which then makes the browser scrollable to the right when it shouldn’t have a scroll bar / be able to scroll (as all objects are within the viewable browser window nothing should be overflowing).

    Does anyone have any tips to what I need to do to stop this from happening?

    Other code applied to the div:

    Any help is much appreciated!

    Thanks :)


    You could use the css calc() function, like shown in this codepen (Click on edit to view the code):

    Or take a look at box-sizing:


    Is there some reason you can’t just add 30px padding to the body?

    The .main div is the 100% wide of the ‘remainder’ by default. Simple really….no need to overthink it.


    Use box-sizing:border-box. Adding any padding will not add to the total width of the div.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.