I’m using a fixed navbar (using navbar-fixed-top) and I’m having an issue where the navbar is rendering beyond the right edge of the window by approx 15px. I’m not 100% sure how to explain it, so here’s a picture:
I’m not sure what’s happening. It’s happening on the sample page you can see in the menu too. I didn’t add any styling to the navbar. I did the blue section with a standard structure (div then a row and then a container). I tested this with Firefox, Chrome, and IE11 on Windows 7 and it happens in all 3 browsers. I don’t know why it’s happening. I would appreciate any suggestions. I’m currently just working in my local dev environment (bedrock-ansible on my Win 7 machine) but I can share some stuff from my repo if it helps debug this.
I realized what I’ve done, but to fix it introduces another problem (or at least a question).
The base.php has a container class on the wrap element:
<div class="wrap container" role="document">
I had taken that container class out so I could get full width backgrounds for my divs. That caused the issue, but in putting that container element back in, now all my divs in my templates don’t stretch across the screen:
So, now my question is, how can I make that blue section (for example) use the full width of the screen without taking out the container element from the base?
Can you provide a live link to the site with the .container class removed? I’ve done this many times without any trouble so it’s most likely a markup or CSS issue.
My guess is you removed the container class without removing the row class from div.content which leaves you with a .row with negative margins outside of a .container. That’s basic Bootstrap 101:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
