title: Putting the nav bar and header on one line
body: <p><a href="https://i.stack.imgur.com/FyJzZ.png" rel="nofollow noreferrer">Click here to see what it all looks like right now</a></p>
  <p>So basically, I am currently trying to put both my nav bar and header on the same line (which I seem to have somehow achieved) but I want to have the header to the left and nav to the right and not back to back like they are right now. I'm pretty new at html and css so I'm sorry to be this clueless.</p>
  <p>HTML:</p>
  
  <pre><code>&lt;h4 id=&quot;Logo&quot;&gt;My Portfolio&lt;/h4&gt;
  
  &lt;nav&gt;
  
    &lt;ul class=&quot;navbar&quot;&gt;
  
      &lt;li&gt;&lt;a href=&quot;Home.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;Education.html&quot;&gt;Education&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;About Me.html&quot;&gt;About Me&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;Contact.html&quot;&gt;&lt;/a&gt;&lt;/li&gt;
  
    &lt;/ul&gt;
    
  &lt;/nav&gt;
  </code></pre>
    
  <p>CSS:</p>
  <pre><code>    *{
  background-color: #a989d6;
  }
  
  body{margin-left: 10%; 
  margin-right: 10%;
  margin-top: 2em;}
  
  header{
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
  }
  
  h4{
  display: inline-block; 
  }
  
  .navbar{
  display: inline-block;
  }
  
  nav a{
  text-decoration: none;
  }
  </code></pre>