Unwanted 1px line on the bottom of a bootstrap navbar and creating a navbar side gap

Question

1)

So I'm attempting to get my navbar with bootstrap all set up, and unfortunately there appears to be a 1px line at the bottom that I can't seem to get rid of. Can anyone suggest any solutions?

2)

Also, is there a way to get a gap on each side of the navbar, but only if the viewport is above 768px? I'm able to achieve this effect by moving the outside the beginning tag, but like I said I want the navbar to move back up when the website is viewed on a mobile device.

Here's my code: http://pastebin.com/zHP09rNu

Thanks.

Answer 1

For the pixel border you need to either set border: 0; or border-color: transparent; on the .navbar element. E.g:

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

Regarding your second point, you could set the width of the navbar to less than 100% and add a margin either side.

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