'My page is not horizontally contained. What CSS is causing this?

This is the webpage I am designing using Bootstrap. For the life of me, I can't figure out what is causing that small blank space to the right of the screen, which makes the website be scroll-able horizontally. Would anyone take a look please?

Your help is much appreciated.

css


Solution 1:[1]

This image is causing your problem

enter image description here

You can set that img with width: 100% that will make your UI fit again. (It also depends what you're expecting from your designs)

enter image description here

Solution 2:[2]

Try using * { outline: 1px solid black } to see which element is overflowing your site. This should help you to identify it.

Solution 3:[3]

Above both methods are usable to get answer as well as to identify the problem by using border. and I would suggest you to always insert width and height of the image and also insert some text inside alt:""; so if your image will not load you may see this text so you can find the problem for the same. for this you can add width: 100% and height: auto;

Thanks, Happy Coding...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nick Vu
Solution 2 DvdRom
Solution 3 Alap Joshi

Related Questions