title: How do I center my embedded youtube iframe?
body: <p>I am working on a product landing page project and I can't figure out how to center the iframe youtube embedded video. I am trying to add this in my .css</p>
  <p>I have tried using margin: auto auto auto auto; and am a bit stuck, thanks...</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>    header{
  text-align: center;
  font-family: serif;
  font-size: 50px;
  margin-top: 30px;
  }
  
      #header-img{
      display: block;
      margin-left: auto;
       margin-right: auto;
       margin-top: 30px;
      }
    
      #header{
      
  
          
  
      }
  
      #video{
          margin: auto auto auto auto;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;header id="header"&gt;SCHIFRIN'S SPROCKETS
      &lt;nav id:="nav-bar"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a class="nav-link" href="#"&gt;LINK 1&lt;/a&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;a class="nav-link" href="#"&gt;LINK 2&lt;/a&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;a class="nav-link" href="#"&gt;LINK 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  
      &lt;/header&gt;
  
      &lt;img src="./logo.png" alt="" id="header-img"&gt;
  
      &lt;iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/M-MKbRSSHG8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
  
      
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>