-1

I've been trying to figure this issue out for a week or so now, but I can't find anything that works. I'm making this launch page for a program my friend is making, but even though I set the Width of the page to 100%, it still extends past that and has the horizontal scroll bar. When you scroll the bar to the right, it's just white, like shown: Example 1

I know that even if I set HTML width to 100%, some padding and other things can ADD to 100%, but I have tried removing all padding and stuff to find what's causing it but can't find anything.

I've created a Gist here if anyone could help me out: https://gist.github.com/virtualflying/bb56034bd9c48c799aa5b8c73f48a5e2

Thanks

Grant
  • 45
  • 5

2 Answers2

0

The div with the class card-deck has a width which is larger than 100% of the page width. This streches the parents elements.

You can solve this by setting max-width to 100% on card-deck div.

Also, check your html, not all elements have a closing tag. Check line 39 and 68.

Martijn Imhoff
  • 918
  • 1
  • 8
  • 22
0

Solution: The problem is on card-deck and card divs.

card-deck has no width but have paddings left and right of 5px each. The card divs inside card-deck have no width.

Add this to your css

.card{
width: 30%;
}

.card-deck{
width: 100%;
padding-left: 1%;
padding-right: 1%;
padding-top:2%
}

And adjust card-deck like this

    <div class="card-deck">

    </div>
hans-könig
  • 553
  • 8
  • 10