react-bootstrap NavBar padding

Question

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):

I would like the bar to span the page and have no padding on the bottom.

My render method is as follows:

  render() {
    if(Auth.isUserAuthenticated() && this.props.location.pathname === '/') {
      return <div/>;
    }
    return (
      <span className="nav-bar">
        <Navbar inverse className="fixed-top collapseOnSelect nav-bar">
          <Navbar.Collapse>
            <Navbar.Header className="locl-link">
              <Navbar.Brand>
                <LinkContainer to="/">
                  <a>locl</a>
                </LinkContainer>
              </Navbar.Brand>
              <Navbar.Toggle />
            </Navbar.Header>
            <BootstrapNav>
              <LinkContainer to="/about">
                <NavItem active={this.linkActive("about")}>About</NavItem>
              </LinkContainer>
            </BootstrapNav>
            <BootstrapNav pullRight>
              {this.logInOut()}
            </BootstrapNav>
          </Navbar.Collapse>
        </Navbar>
      </span>
    );
  }

Any help would be greatly appreciated.

Answer 1

I didn't realise body tag has default margin; whoops