title: Cannot center image
body: <p>My image wont center either will any text when I use the center tool in both CSS and HTML it tends to just stay close to the Top left hand corner if anyone has Ideas on what to do please let me know. also I followed a video tutorial on a vertical nav bar so maybe that is interfering with centering my elements that I would like centered </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-css lang-css prettyprint-override"><code>body, html{
    margin: 0;
    padding: 0;
    font-family: 'Oswald', sans-serif;
    overflow-x: hidden;
  }
  
  .logo{
    float: right;
  }
  
  nav {
    position: fixed;
    z-index: 1000;
    top: 0;
    bottom: 0;
    width: 200px;
    background-color: #000000;
    transform: translate3d(-200px, 0, 0);
    transition: transform 0.4s ease;
    font-size: 35px;
    text-decoration: none;
    color: #000000;
  }
  
  .active-nav nav{
    transform: translate3d(0, 0, 0);
  }
  
  nav ul {
    list-style: none;
    margin-top: 100px;
  }
  nav ul li a {
    text-decoration: none;
    display: block;
    text-align: center;
    color: #ffffff
    padding: 10px 0;
    margin: 35px;
  }
  a {
    text-decoration: none;
    color: #ffffff;
  }
  .nav-toggle-btn {
    display: block;
    position: absolute;
    left: 200px;
    width: 40px;
    height: 40px;
    background-color: inherit;
  }
  
  active-nav .content {
    transform: translate3d(200px, 0, 0);
  }
  
  video {
    position: absolute;
       z-index: 0;
       background: url(mel.jpg) no-repeat;
       background-size: 100% 100%;
       top: 0px;
       left: 0px; /* fixed to left. Replace it by right if you want.*/
       min-width: 100%;
       min-height: 100%;
       width: auto;
       height: auto;
  }
  
  .overlay {
      position:absolute;
      top:0;
      left:0;
      z-index:1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;doctype.html&gt;
  
    &lt;head&gt;
      &lt;title&gt; LAP Aerial Photography &lt;/title&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/font-awesome.css"&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;div class="overlay"&gt;
  
    &lt;header&gt;
      &lt;nav&gt;
        &lt;a href="#" class="nav-toggle-btn"&gt;&lt;i class="fa fa-bars" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-home" aria-hidden="true"&gt;&lt;/i&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-user" aria-hidden="true"&gt;&lt;/i&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-phone" aria-hidden="true"&gt;&lt;/i&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-money" aria-hidden="true"&gt;&lt;/i&gt;Pricing&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-picture-o" aria-hidden="true"&gt;&lt;/i&gt;Gallary&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/nav&gt;
  
  &lt;div class="logo"&gt;
  &lt;img src="Final_Logo.png" alt="LAP Aerial Photography"&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
    &lt;/header&gt;
  &lt;/div&gt;
  
  
    &lt;video autoplay="true" loop="true"&gt;
      &lt;source src="Background.mov" type="video/mov"&gt;
      &lt;source src="Background.webm" type="video/webm"&gt;
    &lt;/video&gt;
  
  
  
  
    &lt;footer&gt;
    &lt;/footer&gt;
  
  
  
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
    (function() {
      var bodyEl = $('body'),
      navToggleBtn = bodyEl.find('.nav-toggle-btn');
     navToggleBtn.on('click' , function(e) {
        bodyEl.toggleClass('active-nav');
        e.preventDefault()
      });
  
    })();
    &lt;/script&gt;
  
    &lt;/body&gt;
    &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>