title: Images retain size when zooming out the page that I am trying with html and css
body: <p>I'm creating a fan-made page for studying purposes and I encountered this accidentally.</p>
  <p>When I zoom out the page with my mouse scroll, the images remain big, and the content inside the grid containers also get weird formatting.</p>
  <p>What I expected to see was the page would just get normally smaller, but it all becomes funky when I zoom out. Please help!
  Here is a <a href="http://prntscr.com/10ncmnz" rel="nofollow noreferrer">Screenshot of the problem</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>*{
      font-family: roboto, arial;
      box-sizing: border-box;
  }
  
  body {
      display: flex;
      flex-direction: column;
      margin: 0px;
  }
  
  h2 {
      font-family:  century gothic, verdana, tahoma;
  
  }
  
  p {
      text-align: justify;
      
      
  }
  
  
  #main{
      width: 80%;
      margin: auto;
      overflow: hidden;
  }
  
  #top-head-img {
      display: flex;
  
      overflow: hidden;
      justify-content: center;
  
  
  }
  
  #top-head-img img {
      width: 1600px;
      transition-property: transform;
      transition-duration: 1s;
      transition-timing-function: ease-in-out;
  
  
  
  }
  
  #top-head-img img:hover {
      transform: scale(1.1);
      
  }
  
  
  #header {
      position: sticky;
      top: 0;
      display: grid;
      grid-template-columns: 1fr auto;
      padding: 0;
      margin: 0;
  }
  
  
  
  #logo {
      background: #060B24;
      display: grid;
      grid-template-columns: 10% 1fr;
  
      
  }
      #header-img {
          width: 100%;
          height: 100%;
      }
  
      #header-text {
          padding: 0px 10px;
          color: white;
      }
  
  #nav-bar {
      background: #060B24;
  
      
  }
  
  #nav-bar ul{
      list-style-type: none;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 50px;
      justify-items: center;
      align-content: center;
  
  }
  
  #nav-bar li a{
      text-decoration: none;
      color: white;       
  }
  
  
  
  #feat-section {
      display: grid;
      grid-template-columns: 45% 55%;
      grid-template-rows: auto;   
      grid-row-gap: 20px;
  
  
  }
      .description {
          width: 100%;
          text-align: justify;
  
          
  
      }
      .description p {
          text-indent: 20px;
          
          
      }
      .icon {
          display: flex;
          justify-content: center;
      }
      .icon img{
          width: 100%;
          min-width: 50%;
          align-content: center;
          
  
      }
  
  
  #products-section {
      
  
  
  }
  
  #product-imgs {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  
  }
  
  .grid-header {
      /*grid-column: 1/4;*/
      text-align: center;
  }
  
  
  .product-box  img {
          /*width: 50%;*/
          height: 40vh;
          /*margin-left: 25%;*/
          margin-right: 5px;
      }
  
  
  
  .column-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 40px;
  }
  
  .row-section {
      display: grid;
      grid-template-columns: 45% 1fr;
      grid-column-gap: 20px; 
  }
  #video {
      max-width: 100%;
      height: calc(315px*0.7);
      
  }
  
  #email {
      width: 50vw;
      height: 40px;
      border-radius: 10px;
      padding: 10px;
  }
  
  #submit {
      background-color: #060B24;
      color: white;
      width: 10vw;
      height: 8vh;
      font-size: 70%;
      text-align: center;
      border-radius: 10px;
      display: block;
      margin: 20px auto;
      padding: 5px;
  }
  
  #submit:hover {
      background-color: #3A3849;
  }
  
  /*when screen small*/
  @media (max-width: 750px) {
      #header {
      position: sticky;
      top: 0;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      padding: 0;
      margin: 0;
      }
  
      #logo {
      background: #060B24;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto 4vh;
      
  
      
      }
  
      #header-img {
          width: 30%;
          height: auto;
          justify-self: center;
  
      }
  
      #header-text {
          margin: 0px 0px !important;
          text-align: center;
          padding: 0px auto;
          align-self: start;
      }
  .product-box  img {
      width: 100%;
      margin: 0;
      
      }
      
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Honkai Impact Merch&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="productstyleFlex.css"&gt;
          &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;a name="top"&gt;&lt;/a&gt;
          
  
          &lt;header id="header"&gt;
              &lt;div id="logo"&gt;
                  &lt;img src="https://upload.wikimedia.org/wikipedia/en/d/da/Honkai_Impact_3rd_logo.png" id="header-img"&gt;
                  &lt;div id="header-text"&gt;
                      &lt;p id="header-text"&gt;Official Honkai Merch by (not)Mihoyo&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              
  
              &lt;nav id="nav-bar"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#feat-section" class="nav-link"&gt;Features&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#products-section" class="nav-link"&gt;Products&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#video" class="nav-link"&gt;Video&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;div id="top-head-img"&gt;
              &lt;img src="https://uploadstatic-sea.mihoyo.com/bh3/upload/officialsites/201910/pcbanner_1570612871_7480.png"&gt;
          &lt;/div&gt;
  
      &lt;main id="main"&gt;
          &lt;div &gt;
              &lt;h1 class="grid-header"&gt;Jump Into the World of Honkai Impact&lt;/h1&gt;
              &lt;div class="row-section"&gt;
                      &lt;iframe width="560" height="315" src="https://www.youtube.com/embed/3xm1kqqN3GQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"&gt;&lt;/iframe&gt;
                  &lt;p&gt;
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                  &lt;/p&gt;
              
              &lt;/div&gt;
              
  
          &lt;/div&gt;
  
          &lt;div id="feat-section"&gt;
              &lt;div class="icon"&gt;
                  &lt;img src="https://static.wikia.nocookie.net/honkaiimpact3_gamepedia_en/images/6/63/White_Comet.png/revision/latest?cb=20180521030059"&gt;
              &lt;/div&gt;
  
              &lt;div class="description"&gt;
                  &lt;h2&gt;Based on the iconic Valkyries of Honkai Impact 3&lt;/h2&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="icon"&gt;
                  &lt;img src="https://i.pinimg.com/originals/e3/9d/a5/e39da548f5632d1ccfdcad9b54a8c51c.png"&gt;
              &lt;/div&gt;
              &lt;div class="description"&gt;
                  &lt;h2&gt;Feel the lightning with stunningly rendered 3D effects&lt;/h2&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="icon"&gt;
                  &lt;img src="https://static.wikia.nocookie.net/houkai3rd/images/e/e6/60712.png/revision/latest?cb=20191118063408"&gt;
              &lt;/div&gt;
              &lt;div class="description"&gt;
                  &lt;h2&gt;Bring the Valkyrie team together to protect all that is beautiful in the world&lt;/h2&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
  
          &lt;div id="products-section"&gt;
              &lt;h2 class="grid-header"&gt;Tech Otakus Save the World!&lt;/h2&gt;
              &lt;div id="product-imgs"&gt;
                  &lt;div class="product-box"&gt;
                  &lt;img src="https://i.pinimg.com/736x/87/a3/f1/87a3f18e0f4eaa61de4ac3a6b273659d.jpg"&gt;
                  &lt;/div&gt;
                  &lt;div class="product-box"&gt;
                      &lt;img src="https://cdn.archonia.com/images/1-76856403-1-1-original1/honkai-impact-3rd-pvc-figure-rita-rossweisse-maid-of-celestia-ver-1-8.jpg"&gt;
                  &lt;/div&gt;
                  &lt;div class="product-box"&gt;
                      &lt;img src="https://cdn.shopify.com/s/files/1/0244/2235/0953/products/STL184688_1200x1200.jpg?v=1611343542"&gt;
                  &lt;/div&gt;
                  &lt;div class="product-box"&gt;
                      &lt;img src="https://images.goodsmile.info/cgm/images/product/20171114/6866/48702/large/ffc6acbe3bf32e6fd793d5a4ffd34dc4.jpg"&gt;
                  &lt;/div&gt;
                  &lt;div class="product-box"&gt;
                      &lt;img src="https://cdn02.plentymarkets.com/qozbgypaugq8/item/images/5010/full/STAT-HONKAI008a.jpg"&gt;
                  &lt;/div&gt;
                  &lt;div class="product-box"&gt;
                      &lt;img src="https://bbts1.azureedge.net/images/p/full/2020/10/4c458d67-de44-46c0-a37f-c45d74bf0b65.jpg"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              
          &lt;/div&gt;
  
          &lt;div class="column-section"&gt;
              &lt;h2&gt;Sign Up to Receive Info From Schicksal HQ&lt;/h2&gt;
              &lt;form id="form" action="https://www.freecodecamp.com/email-submit"&gt;
                  &lt;input type="email" name="email" id="email" placeholder="Enter your email address"&gt;
  
                  &lt;input type="submit" name="submit" id="submit"&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/main&gt;
  
          
  
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>