How to horizontally align heading and navbar?
<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>