Remove left padding from Bootstrap navbar and maintain correct responsive behaviour

Question

I would like to remove the left padding from the navbar below:

and top padding in a narrow viewport:

Navbar code & JSFiddle:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">About</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Discuss</a></li>
    </ul>
  </div>
</nav>

https://jsfiddle.net/wx6bx3pr/

Already attempted solution - setting the padding of .container-fluid to zero gets the desired outcome in the wide viewport:

.container-fluid
{
  padding: 0;
}

Except completely breaks it in a narrow viewport, with the active menu item protruding beyond the navbar, and no spacing between the container and the text of menu items:

How do I get the desired solution without breaking the narrow viewport?

Many thanks.

Answer 1

Try a negative margin on the navbar like this..

@media (min-width: 768px) {
  .navbar-nav {
    float: left;
    margin: 0;
    margin-left: -15px;
  }
}

.navbar-nav {
    margin: 0 -15px;
}

http://codeply.com/go/leAaYlOaYd