Fixed React Navbar - reactjs

Question

I am using Materialize UI with React and I am trying to make the navbar on top fixed, however, I am getting a big gap on the left-hand side of the navbar that pushes the entire navbar itself to the right (see photo).
How can I make that gap in front disappear? Sorry, if this is a silly question but it's my first time trying to build an actual web app with React.
Thanks.
// 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;