Annoying edge on the right side

Hey, me again

i have an annoying little edge on the right side which causes a horizontal scrollbar,
you can see the edge only when scrolling to the side…

The problem is i tried it with overvlow-x: hidden but then i get a extra vertical scrollbar for my navbar :smiley:
If i use overflow: hidden on the live-server the navbar is overlaying the vertical scrollbar.
I also tried playing around with html, body css reset.

My guess is that the problem is maybe caused by the fixed navbar.

Here’s my codepen link: CLICK

Help very appreciated! :slight_smile:

greets f

The row class has margin-left and margin-right of -15px. You can sort of see it by scrolling the page to the right, then inspecting the Resources section. You’ll notice that its right edge touches the right edge of the viewport, compared to the other sections.

A quick fix would be adding a CSS rule for .row to remove these margins.

2 Likes

@kevcomedia Thanks for this fix! How can i see this in inspector mode?

I just looked at it probably a hundred times and didn’t
recognize that…

By the way just to toss out another fix, apparently you get these side margins extending passed the edges of the page (when using Bootstrap) by not wrapping .row classed elements inside .container/.container-fluid elements. No idea why but I’m guessing it has something to do with BS’s built-in styles working off of other built-in styles. So basic rule of thumb is if there’s a row there needs to be a container around it.

3 Likes

I reverted the margins for this example.

You can do it by clicking the button to the left of the Inspector tab in Firefox’s dev tools (there is a similar button in Chrome’s), then hovering the element of interest. Scrolling the page all the way to the right helps with looking for any problematic element (because you can see the right edge of the highlighted area)

1 Like