title: Bootstrap 4 branding element pushing navbar to a new line
body: <p><a href="https://i.stack.imgur.com/LAKr2.jpg" rel="nofollow noreferrer">I want to have a fixed top navbar like this with (Because its one list item I dont need the hamburger toggleable feature)</a></p>
  
  <p>However the navbar brand element pushed the navigation to a new row. I tried the pull-right class and a justify-content-end but neighter of them worked.</p>
  
  <p><a href="https://i.stack.imgur.com/rziue.jpg" rel="nofollow noreferrer">It looks like this.</a></p>
  
  <p>My code so far is like this. Thank you for your help!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    padding-top: 130px;
  }
  
  .navbar{
   padding-top: 1rem;
   padding-bottom: 2rem;
   height: 130px;
  }
  
  .bg-faded{
   background-color: white;
  }
  
  .navbar-brand{
   font-family: 'Lato', sans-serif;
   font-size: 2.20rem;
   color: rgba(0, 0, 0, 1);
   font-weight: 900;
  }
  
  
  .nav-item a{
   font-family: 'Lato', sans-serif;
   font-size: 0.8rem;
   color: rgba(0, 0, 0, 1);
   font-weight: 900;
   text-transform: uppercase;
  }
  
  .jumbotron{
     margin-bottom: 0;
  }
  
  #week1{
       background-image: url('../img/week1.jpg');
       background-repeat: no-repeat;
       background-position: center;
       background-size:100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
     &lt;title&gt;52 Weeks of Portrait&lt;/title&gt;
      &lt;!-- Required meta tags --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"&gt;
      &lt;link rel="stylesheet" href="css/my.css"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Lato:400,700,900|Merriweather" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;!-- Navigation Bar --&gt;
    &lt;nav class="navbar fixed-top navbar-light bg-faded"&gt;
     &lt;a class="navbar-brand" href="index.html"&gt;52 Weeks of Portrait&lt;/a&gt;
     &lt;ul class="nav navbar-nav justify-content-end"&gt;
      &lt;li class="nav-item"&gt;
      &lt;a class="nav-link" href="#"&gt;About + Rules&lt;/a&gt;
      &lt;/li&gt;
     &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;div class="jumbotron jumbotron-fluid" id="week1"&gt;
      &lt;div class="container"&gt;
        &lt;h1 class="display-3"&gt;Week One&lt;/h1&gt;
        &lt;p class="lead"&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
    
    
   
      &lt;!-- jQuery first, then Tether, then Bootstrap JS. --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>