title: HTML and CSS navigation bar next to logo
body: <p>I'm new to programming and I'm trying to make a website but I have a big problem. I want a navigation bar next to my logo and sticking to the top when i scroll, but I can't get it to work. The text is on top of each other and I don't know how to make it work.</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;
        &lt;style&gt;
           body{   background-color: black}
           img.logo{   margin-left: 20px;
           margin-top: 10px;}
           li{ display: inline}
           a{  position: fixed;
           width: auto;
           height: 50px;
           margin-left: 50px;
           margin-top: 60px;
           color: #DFDD7D;
           font-family: 'Open Sans', sans-serif;
           font-size: 20px; 
           font-weight: 300;
           letter-spacing: 0.5px
           margin: 0px;
           padding: px;}
        &lt;/style&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;header&gt;
           &lt;img class="logo" src="https://lh4.googleusercontent.com/7zZpeNiaANxK7CqDKwE2PdemWJFKoskKGKelsSmQSNmZQOBpKwMkOST3ucML162QIf3k5_ZclpFT_PE=w998-h1006" style="height: auto; width: 300px" &gt;
           &lt;li&gt;&lt;a href="Site%20DIA%20main.html"&gt;Projecten&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href=""&gt;over&lt;/a&gt;&lt;/li&gt;
        &lt;/header&gt;
     &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>