CODEWITHSUNDEEP
css
user2669997
user2669997

Reputation:

stop body width bigger than screen size

I am trying to setup my CSS but i have found the body size is bigger than my screen size, which means everything else becomes slightly out of place. I have tried width 100% and 100vw but still get the same results You can see in the image below the border on the right has disappeared and there is a scroll bar along the bottom.

body{
   border: solid;
   width: 100%;  //or 100vw
}

enter image description here

just to add the only way to bright this in is to do width at 99%. Is this normal practice

Upvotes: 1

Views: 1787

Answers (1)

Hao Wu
Hao Wu

Reputation: 20699

By default, body has some margin attached to it. Assign margin: 0 and overflow-x: hidden to the body will fix this problem.

body {
  margin: 0;
  overflow-x: hidden;
  border: solid;
  width: 100%;  //or 100vw

  /* if you want to add some gaps between the edge of the screen, use padding instead */
  padding-left: 2px;
}

Also, since you have border assigned to the body. It's better to change the box-sizing to border-box to all your element by default, otherwise your border will be cut off if you assign width: 100% to your body:

* {
  box-sizing: border-box;
}

Upvotes: 1

Related Questions