Responsive Web Design Projects - Build a Product Landing Page

Tell us what’s happening:
Describe your issue in detail here.

I don’t know how to move my video, I tried everything. i tried to use the position tag and it stays in the same place.
Your code so far

/* file: index.html */
<link rel="stylesheet" href="styles.css">
<header id="header"> 
<div>
 <img width="200px" id="header-img" src="https://www.perrosamigos.com/Uploads/perrosamigos.com/Imagenes/gatos-y-perros-pueden-llevarse-bien.jpg">

<nav id="nav-bar">
     <ul>
       <li><a href="#email" class="nav-link">Home</a></li>
       <li><a href="#header-img" class="nav-link">Contact</a></li>
       <li><a href="#video" class="nav-link">Donaciones</a></li>
     </ul>
   </nav>
   </div>
 </header>
 <body>
   
<iframe id="video" width="500" height="310" src="https://www.youtube.com/embed/HeiUiFWpjqQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

      <form id="form" action="https://www.freecodecamp.com/email-submit">
     <input id="email" placeholder="Email" type="email" name="email">
     <input id="submit" type="submit">
     </form>
     </body>
/* file: styles.css */
body{background: linear-gradient(yellow, orange, red)
}
<style>
#email{}
#submit{}
#nav-bar{}
.nav-link{}
ul{list-style-type: none;}
li{float: left;
padding: 16px;
}
#header{
 position: fixed;
 top: 0px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 350px) {
   li {
     text-align: center; }
#video{position: absolute;
 top: 100px;
}
</style>
   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Responsive Web Design Projects - Build a Product Landing Page

Link to the challenge:

Try setting margin-inline to auto and set your width property to 100% so it doesn’t cause any issues.