title: Fix "sticky" navigation bar on top of the screen
body: <p>So, I've been trying to create a navigation bar, using HTML and CSS that will "stick" to the top of the page, even when the user scrolls down.
  Used the <code>position: sticky</code> tag to do it. The problem is, I am not able to fix the div at the top of the page.</p>
  
  <p>That's my CSS:</p>
  
  <pre><code>.bar {
    position:sticky;
    top:0;
    color: white;
    background-color: black
  }
  
  p {
    display: inline;
  }
  </code></pre>
  
  <p>... and my HTML code:</p>
  
  <pre><code>&lt;nav class="bar"&gt;
    &lt;p&gt;Home&lt;/p&gt;
    &lt;p&gt;Info&lt;/p&gt;
    &lt;p&gt;Contact Us&lt;/p&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>The <code>sticky</code> propriety works. The problem is, <code>bar</code> is not "fixed" at the top of the page. I know. Not the best word used for the explanation.
  I just want it to be there, without any margins. Tried to reduce from the body's padding/margins but didn't work. What can I do?</p>
  
  <p>Another question: what does really <code>top:0</code> do? The <code>position:sticky</code> propriety doesn't work without it and I want to know why.</p>