title: react-bootstrap NavBar padding
body: <p>I am using the react-bootstrap library to construct a nav bar at the top of my page using Navbar import. However, the bar seems to have some padding at the bottom which I do not want and can't seem to remove, as seen here (Yellow on bottom. Also navbar component does not seem to span the entire page [as seen by white space on either side of bar]; not sure of why this is either):</p>
  
  <p><a href="https://i.stack.imgur.com/sP0eF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/sP0eF.png" alt="enter image description here"></a></p>
  
  <p>I would like the bar to span the page and have no padding on the bottom.</p>
  
  <p>My render method is as follows:</p>
  
  <pre><code>  render() {
      if(Auth.isUserAuthenticated() &amp;&amp; this.props.location.pathname === '/') {
        return &lt;div/&gt;;
      }
      return (
        &lt;span className="nav-bar"&gt;
          &lt;Navbar inverse className="fixed-top collapseOnSelect nav-bar"&gt;
            &lt;Navbar.Collapse&gt;
              &lt;Navbar.Header className="locl-link"&gt;
                &lt;Navbar.Brand&gt;
                  &lt;LinkContainer to="/"&gt;
                    &lt;a&gt;locl&lt;/a&gt;
                  &lt;/LinkContainer&gt;
                &lt;/Navbar.Brand&gt;
                &lt;Navbar.Toggle /&gt;
              &lt;/Navbar.Header&gt;
              &lt;BootstrapNav&gt;
                &lt;LinkContainer to="/about"&gt;
                  &lt;NavItem active={this.linkActive("about")}&gt;About&lt;/NavItem&gt;
                &lt;/LinkContainer&gt;
              &lt;/BootstrapNav&gt;
              &lt;BootstrapNav pullRight&gt;
                {this.logInOut()}
              &lt;/BootstrapNav&gt;
            &lt;/Navbar.Collapse&gt;
          &lt;/Navbar&gt;
        &lt;/span&gt;
      );
    }
  </code></pre>
  
  <p>Any help would be greatly appreciated.</p>