Materialize CSS- Align navbar to the far right

I am using materialize CSS and have created a Nav but want to move it a bit further to the right without affecting the position of the logo. See current image below;

Navbar photo

My current code:

< div class="navbar-fixed">
  <nav class="white" role="navigation" id="top-nav">
    <div class="nav-wrapper container">
      <a id = "logo-container" href="#" class="brand-logo"><img src = "img/DataNavSmaller.png" ></ a >

        < ul class="right hide-on-med-and-down">
        <li><a href = "#" class="active">Home</a></li>
        <li><a href = "#" > Who We Are</a></li>
        <li><a href = "#" > What We Do</a></li>
        <li><a href = "#" > Contact Us</a></li>
      </ul>

      <ul id = "nav-mobile" class="sidenav">
        <li><a href = "#" > Navbar Link</a></li>
      </ul>
      <a href = "#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    </div>
  </nav>
</div>

CSS:

nav.brand - logo {

    margin - left: -60px;
    padding - top: 4px;
}

nav.right {

    padding - top: 10px;

}
nav ul a{

    color: black;
    font - size:20px;

}

How can i achieve the above?

Solution

You can set the right of your navbar with CSS properties position: fixed; top: 10px; right: 5px;. position: fixed makes the element stay in place. top specifies the distance the element is from the top and right specifies the distance the element is from the right (these properties only work when the display property is set).

.navbar-fixed{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #BEBEBE;
}
.logo{
  margin: 10px 10px 10px 15px;
   background: red;
   padding: 5px;
   background: linear-gradient(red, yellow, green);
   width: 60px;
   height: 25px;
   color: white;
}
.navbar-right{
  position: fixed;
  top: 10px;
  right: 5px;/*pixels away from the right of the navbar*/
}

.title{
  display: inline-block;
  margin: 5px;
}

<div class="navbar-fixed">
<div class="logo">
<!--<img src="something.png" alt="img"/>-->
DataNav
</div>
<div class="navbar-right">
<div class="title">
Home
</div>
<div class="title">
Who we are
</div>
<div class="title">
What we do
</div>
<div class="title">
Contact us
</div>
</div>
</div>