title: Fix youtube embed position
body: <p>I added an embed video to my website but it has a really bad position, how do I fix it?</p>
  <p>This is how it looks like now: <a href="https://i.stack.imgur.com/vN1JG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vN1JG.png" alt="enter image description here" /></a></p>
  <p>This is how I want it to look like (Red box is embed video): <a href="https://i.stack.imgur.com/IMGQQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IMGQQ.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>.topnav {
    overflow: hidden;
    display: flex;
    justify-content: center;
    
  }
  
  .container {
    min-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
      flex-direction: column; 
  }
  .topnav a {
    float: left;
    color: red;
    text-align: center;
    padding: 14px 14px;
    text-decoration: none;
    font-size: 23px;
    border-style: solid;
    text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px, #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
    margin-top: 215px;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  .menu{
      cursor: pointer;
  }
  .aboutp{
      width: 1000px;
      text-align: center;
      display: block;
      margin:auto;
  }
  .mario{
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 20vw;
      margin: auto;
  }
  .topContent{
      background-color: red;
      height: 10vh;
      width: 70vw;
      max-width: 700px;
      max-height: 200px;
      margin: auto;
      justify-content: center;
      align-items: center;
      display: flex;
      font-size: 1.5vh;
      border-style: solid;
  }
  .mainContent{
      height: 100%;
      width: 100%;
      margin: 0 auto 50px;
      justify-content: center;
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      font-size: 1.5vh;
      max-width: 768px;
  
  }
  
  .left {
      width:15%;
      float: left;
  }
  
  .right{
      width:15%;
  }
  
  .center {
      width:65%;
      background-color: antiquewhite;
      display: flex;
      margin-bottom: 50px;
      align-items: center;
      flex-direction: column;
      border-style: solid;
  }
  
  .bottom {
      background-color: red;
      width: 100%;
      max-width: 768px;
      max-height: 200px;
      display: flex;
      border-style: solid;
  }
  
  .bottom a {
      display: flex;
      justify-content: center;
      color: white;
      padding: 2vh;
      width: 768px;
      text-decoration: none;
      font-size: 2vh;
      border-right: 2px solid black;
      text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px, #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class = "topContent"&gt;
          &lt;h1&gt;Game History&lt;/h1&gt;
      &lt;/div&gt;
  &lt;div class = "mainContent"&gt;
          &lt;div class="left"&gt;
          &lt;iframe width="560" height="315" src="https://www.youtube.com/embed/JO86YAiYFjc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
          &lt;/div&gt;
          &lt;div class="center"&gt;
              &lt;p class="aboutp1"&gt;
                   bunch of text
              &lt;/p&gt;
              &lt;p class="aboutp2"&gt; 
                        bunch of text
                  &lt;img src="../resources/mario-super.gif" alt="Mario Gif" class="mariogif"&gt;
                        bunch of text
              &lt;/p&gt;
  
              &lt;p class="aboutp3"&gt;
                    bunch of text
                           &lt;/p&gt;
              &lt;p class="aboutp4"&gt;      
                              bunch of text
                              &lt;/p&gt;
              &lt;p class="aboutp5"&gt;
                    bunch of text
                                   &lt;/p&gt;
                  
          &lt;/div&gt;
          &lt;div class="right"&gt;&lt;img src="../resources/mario.png" alt="Mario Image" class="mario"&gt;&lt;/div&gt;
  
      
      &lt;div class="bottom"&gt;
          &lt;/div&gt;
      
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>As you can see the image is both behind the text and has a bad position. I think this might be because I put it in &quot;mainContent&quot; which has a max-width of 768px, but I still don't know how to fix it.</p>