title: How to put heading and nav on the same line (not working)
body: <p>Basically what's happening is that my h1 and my nav elements aren't going on the same line. I tried adding a width of 100% and float left and right properties on h1 and nav but still it's not on the same line. I put some gibberish in the h1 to show you that the leveling is off by very little. Help! </p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;!doctype html&gt;
      &lt;html&gt;
      &lt;head&gt;
              &lt;title&gt;
              Personality Speakes Before You
              &lt;/title&gt;
              &lt;meta charset='utf-8'&gt; 
          &lt;link href="main.css" rel="stylesheet" type="text/css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;header&gt;
          &lt;h1&gt;Anum kdljflkasjfdlajsdlfjslfjsalkdfjld;skjgl;j&lt;/h1&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Event&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
          &lt;/header&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's my CSS:</p>
  
  <pre><code> body  {
      background-color: azure;
      font-family: cursive;
  }
      header {
      width: 100%;
  }
  h1 {
      float:left;
      font-size: 30px;
      text-decoration: underline;
  }
  nav {
      float: right;
  }
  ul {
          color: darkslategray;
      }
  
  li {
      display: inline;
      font-size: 30px;
      margin-left: 10px;
      margin-right: 10px;
  }
  </code></pre>
  
  <p>Thanks!</p>