固定反应导航栏

我正在将 Materialise UI 与 React 一起使用，并且我试图使顶部的导航栏固定，但是，我在导航栏的左侧有一个很大的间隙，将整个导航栏本身推到了右侧（请参阅照片）。

我怎样才能让前面的那个空隙消失？抱歉，如果这是一个愚蠢的问题，但这是我第一次尝试使用 React 构建实际的 Web 应用程序。

谢谢。

// App.js

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Header from './Header';

const App = () => {
    return (
        <BrowserRouter>
        <Route path="/"/>
        <Header />
        </BrowserRouter>
    )
};

export default App;

// Header.js

import React from 'react';
import { Link } from 'react-router-dom';

const Header = () => {
    return (
     <div className='container'>
         <div className="navbar-fixed">
          <nav className="teal">
           <div className="nav-wrapper">
            <Link to="#home" className="brand-logo">Travelville</Link>
            <Link to="#" data-activates="mobile-nav" className="button-collapse">
              <i className="material-icons">menu</i>
            </Link>
            <ul className="right hide-on-med-and-down">
              <li>
                <Link to="#home">Home</Link>
              </li>
              <li>
                <Link to="#search">Search</Link>
              </li>
              <li>
                <Link to="#popular">Popular Places</Link>
              </li>
              <li>
                <Link to="#gallery">Gallery</Link>
              </li>
              <li>
                <Link to="#contact">Contact</Link>
              </li>
            </ul>
          </div>
         </nav>
      </div>
      <ul className="side-nav" id="mobile-nav">
      <li>
        <Link to="#home">Home</Link>
      </li>
      <li>
        <Link to="#search">Search</Link>
      </li>
      <li>
        <Link to="#popular">Popular Places</Link>
      </li>
      <li>
        <Link to="#gallery">Gallery</Link>
      </li>
      <li>
        <Link to="#contact">Contact</Link>
      </li>
    </ul>
    </div>
    );
};

export default Header;