My page scrolls to the right with a blank space visible to the right. Can someone tell me what I’m missing?
I think you are missing the required div with class=“container-fluid” (or class="container) for your rows.
Try this blog post:
Just add the ghost CSS at the end of your CSS file and it will reveal which element is causing the unwanted scrolling.
This is frinking awesome! Thanks! (( Debug Ghost CSS Elements Causing Unwanted Scrolling - wernull))
Always nest the div rows in div container-fluid/container. e.g. ( < div class=“container-fluid”> < div class=“row”> < /div>< /div>. You have two div rows between the red bkgrd and the portfolio grn bkgrd that does not have it.
I have found that this can normally caused by three things:
- An element has margin that push s it outside the html/body elements
- An element is positioned outside the html/body elements
- Or an element has text that is not breaking and going outside it’s frame
In your case it looks like its the first one.
Your .row elements have negative margin which pulls them outside, so to fix this you can nest them in a .container element to offset this.
Thank you! I got it all sorted out.
WOW! This is awesome! Thanks so much for sharing that with me!
You’re welcome! Have a nice day