title: How to horizontally align heading and navbar?
body: <p>I have a navbar, I have a heading. My problem occurs when I attempt to place my heading on the same "line" of my navbar if that makes sense, originally, when I place my h2 element, the text would appear above the navbar.</p>
  
  <p>When I fix the h2 element, it will be left aligned and overlapping my navbar, even though I specified it to be centered in the HTML. Can somebody please explain what makes a webpage do this? And why fixed elements cannot be moved around (Left aligned, centered, right aligned etc.)</p>
  
  <p>I don't know if my container is the issue, my container will be the basic, well "container" for all the information that will be displayed in this page.</p>
  
  <p>Finally, I am new to HTML and any information will be useful in the long run. Thank you.</p>
  
  <p><a href="https://jsfiddle.net/vjzmqdxk/" rel="nofollow">JSFIDDLE</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: Arial, Verdana, sans-serif;
    background-color: white;
  }
  .logo {
    margin-left: 25px;
  }
  .navbar {
    margin-top: 50px;
    margin-left: 25px;
    padding: 0;
    font-size: 15px;
    float: left;
  }
  h2 {
    margin-top: 50px;
    font-size: 35px;
    position: fixed;
  }
  .container {
    text-align: center;
  }
  a {
    text-decoration: none;
    color: black;
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 175px;
    background-color: #f1f1f1;
    border: 2px solid #555;
  }
  li a {
    display: block;
    color: #000;
    padding: 12px 0 12px 0;
    text-decoration: none;
  }
  li a:hover {
    background-color: #555;
    color: white;
  }
  li {
    text-align: center;
    border-bottom: 1px solid #555;
  }
  li:last-child {
    border-bottom: none;
  }</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;link rel="stylesheet" type="text/css" href="homepage.css"&gt;
    &lt;title&gt;CSGOMarble&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;h3 style="float: right; margin-right: 25px;"&gt;
      &lt;a href="http://www.steamcommunity.com/login/"&gt;SIGN IN WITH STEAM&lt;/a&gt;
    &lt;/h3&gt;
    &lt;div class="logo"&gt;
      &lt;img src="logo.png" alt="LOGO" height="60px" width="200px"&gt;
    &lt;/div&gt;
    &lt;hr&gt;
    &lt;div class="container"&gt;
      &lt;h2 style="text-align: center;"&gt;Welcome to CSGOMarble!&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="navbar"&gt;
      &lt;ul&gt;
        &lt;li style="background-color: #D9D9D9; font-size: 20px; padding: 12px 0 12px 0;"&gt;MENU&lt;/li&gt;
        &lt;li&gt;&lt;a href="coinflip.html"&gt;COINFLIP&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="about.html"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="contact.html"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>