1px unwanted line on the bottom of the navigation bar and creating a barrier in the navigation bar

Question

1)

So, I'm trying to configure my navigation bar with bootstrap settings, and, unfortunately, there is a 1px line at the bottom of the screen that I can’t get rid of. Can anyone suggest any solutions?

2)

Also, is there a way to get a space on each side of the navigation bar, but only if the viewport is above 768 pixels? I can achieve this effect by moving the external start tag, but, as I said, I want the navigator to come back when the website is viewed on a mobile device.

Here is my code: http://pastebin.com/zHP09rNu

Thanks.

Answer 1

For a pixel border, you need to either set border: 0; , or border-color: transparent; in the .navbar element. For instance:

 .navbar { background-color: #99ccff; border: 0; } 

As for your second point, you can set the width of the navigation bar to less than 100% and add margin on each side.

Demo is available here: http://codepen.io/guyfedwards/pen/CHJAg

Answer 2

If you ride with Bootstrap 3.3.6 and use LESS variables, just set @ navbar-default-border to the value of the navbar variable. You can learn more about this here - http://getbootstrap.com/customize/#navbar

 @navbar-default-border:none;