Search code examples
htmlcsstwitter-bootstrapwidthviewport

Slight horizontal scrolling on HTML that is 100%vw


I have a simple bootstrap hero/jumbotron that is showing some slight horizontal scrolling and I'm losing my mind trying to figure out what's causing it.

I have the Bootstrap "jumbotron" 100vw but it still shows a gap between the end of the image and scroll bar.

https://codepen.io/bencasalino/pen/yrQgrp

` html, body {

width: 100vw;

} `


Solution

  • Add following lines in css

    * {
      margin: 0;
      padding: 0;
    }
    

    Because browsers apply default margins/paddings. It's always better to start by clearing default margins/paddings so it won't disturb our calculation.