title: iframe embed moving towards the left on screen resize
body: <p>So I have made a projects page in which the iframe embed keeps going to the left when screen resize but I want it to be in the <code>centre</code> instead of being on the left side:</p>
  <p><a href="https://i.stack.imgur.com/GRWs5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GRWs5.png" alt="enter image description here" /></a></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>.hr {
    height: 5px;
    width: calc((160vw)/2);
    background-color: #181818;
    position: relative;
    border-width: 0;
  }
  
  .video {
    width: calc((160vw)/2);
    height: calc((90vw)/2); 
    border : 2px solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'&gt;&lt;/script&gt;
      &lt;body class='container'&gt;
  
      &lt;hr class='hr'&gt;
      &lt;br class='us'&gt;
  
      &lt;iframe frameBorder="0" class='video' src='https://www.youtube.com/embed/inBBuwcLwH8'&gt;&lt;/iframe&gt;
  
      &lt;br class='us'&gt;
      &lt;hr class='hr'&gt;
  
      &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I've tried adding <code>margin</code> to the left but it seems to move to the right when the screen isn't resized</p>
  <p>Thanks in advance!</p>