title: HTML and CSS Horizontar nav bar with "brand"
body: <p>I'm trying to make a <code>navbar</code> for a new project I'm working on.</p>
  
  <p>I want the <code>navbar</code> to have the website title in it, that is the <code>h1</code> and the menu items, but when I try to do that it doesn't make both the <code>h1</code> and the <code>ul</code> on the same line.</p>
  
  <p>I want the navbar items and the navbar "header" aligned at the same height and on the same line not as diffrent blocks that can't fit together.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>html, body {
    width: 100 % ;
    padding: 0;
    margin: 0;
    font - family: 'Roboto',
      sans - serif;
  }
  
  h1, h2, h3, h4, h5 {
    margin: 0;
    padding: 0;
  }
  
  .main - title {
    text - align: center;
    margin - top: 20 px;
    margin - bottom: 2 px;
  }
  
  header {
    border - bottom: 2 px solid grey;
  }
  
  ul {
    padding: 0;
    margin: 0;
  }
  
  .nav - ul {
    list - style - type: none;
    float: right;
    margin - right: 50 px;
    display: inline - block;
  
  }
  
  .navbar - title &gt; h1 {
    text - align: center;
    margin - top: 20 px;
  }
  
  .nav - ul &gt; a: visited, a: link {
    text - decoration: none;
    color: black;
    font - size: 1.5e m
  }</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;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Raspberry pi projects&lt;/title&gt;
    &lt;link rel="stylesheet" href="assets/css/main.css"&gt;
  
    &lt;!-- JQUERY CDN --&gt;
    &lt;script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.js"&gt;&lt;/script&gt;
  
    &lt;!-- LOADING SCREEN SCRIPT --&gt;
    &lt;!--&lt;script type="text/javascript" src="assets/js/load.js"&gt;&lt;/script&gt;--&gt;
  
    &lt;!-- ROBOTO FONT --&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Roboto:400,900,100italic,300italic,500,300,700,400italic,700italic,500italic,100&amp;subset=latin,greek-ext,latin-ext' rel='stylesheet' type='text/css'&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;nav&gt;
      &lt;div&gt;
        &lt;div class="nav-brand"&gt;
          &lt;a href="#" class="navbar-title"&gt;&lt;h1&gt;Raspberry pi projects&lt;/h1&gt;&lt;/a&gt;
        &lt;/div&gt;
  
        &lt;div class="nav-list"&gt;
          &lt;ul class="nav-ul"&gt;
            &lt;li class="nav-item"&gt;
              &lt;a href="#"&gt;Submit a project&lt;/a&gt;
            &lt;/li&gt;
  
          &lt;/ul&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  
  
    &lt;script src=""&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>