title: Why chrome is not taking whole width when using max-width or width?
body: <p>Im building a site, it is thinked for mobile view but also must be work on web.
  I have a parent div width:100% and child div. What I need is keep fixed width child when device is narrow. I use width:100% and max-width: 540px for that. It works on firefox but in chrome the child div is resized.</p>
  <p>this is what I need (gif explanation)
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;blockquote class="imgur-embed-pub" lang="en" data-id="a/Us6DEtr" data-context="false" &gt;&lt;a href="//imgur.com/a/Us6DEtr"&gt;&lt;/a&gt;&lt;/blockquote&gt;&lt;script async src="//s.imgur.com/min/embed.js" charset="utf-8"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>this is what is happening (gif explanation)</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-html lang-html prettyprint-override"><code>&lt;blockquote class="imgur-embed-pub" lang="en" data-id="a/zoKGKeL" data-context="false" &gt;&lt;a href="//imgur.com/a/zoKGKeL"&gt;&lt;/a&gt;&lt;/blockquote&gt;&lt;script async src="//s.imgur.com/min/embed.js" charset="utf-8"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>and this is the code
  <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> 
  .land {
      height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
  }
  
  .land-background {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: stretch;
      z-index: -10;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50%;
  }
  
  .land-background:before {
      position: absolute;
      background: inherit;
      background-size: cover;
      -moz-filter: blur(15px);
      -o-filter: blur(15px);
      -ms-filter: blur(15px);
      filter: blur(15px);
      transform: scale(1.05);
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      content: "";
  }
  
  
  .land-background-vedio{
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      max-width: 540px;
      box-shadow: 0 7px 29px 0 rgb(100 100 111 / 20%);
      z-index: 0;
  }
  
  .land-background-vedio video {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
  }
  
  audio, video {
      display: inline-block;
  }
  
  
  .land-main.main-vhcheck {
      min-height: calc(100vh - var(--vh-offset, 0px));
  }
  
  .land-main {
      position: relative;
      padding: 40px 0 0;
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      z-index: 0;
      box-sizing: border-box;
  }
  
  .land-main-info {
      width: 100%;
      flex: 1;
  }
  
  
  
  body {
      margin: 0;
      font-family: Google Sans,SF Pro Display,Arial,sans-serif;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      text-align: left;
      background-color: #fff;
  }
  
  html {
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }
  
  
  article, aside, blockquote, body, button, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, input, legend, li, menu, nav, ol, p, section, td, textarea, th, ul {
      margin: 0;
      padding: 0;
  }
  
  *, :after, :before {
      box-sizing: border-box;
  }
  
  * {
      -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  
  body {
      font-size: 14px;
  }
  
  body, button, html, input, li, p, select, table, td, tr, ul {
      letter-spacing: 1px;
      font-size: 14px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;/head&gt;
      &lt;div class="land"&gt;
          &lt;div class="land-background is-fixed" style='background-image: url("https://image.mux.com/5zw015Sp01Yl02Ssb00xeotvrZLRXAzqg02UL/thumbnail.jpg?token=eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InQ5UHZucm9ZY0hQNjhYSmlRQnRHTEVVSkVSSXJ0UXhKIn0.eyJ3aWR0aCI6NjQwLCJ0aW1lIjowLCJleHAiOjMxNzE5MjI1MTA5MiwiYXVkIjoidCIsInN1YiI6IjV6dzAxNVNwMDFZbDAyU3NiMDB4ZW90dnJaTFJYQXpxZzAyVUwifQ.B9894ppuWg8SAfzx36ZkeEBK1c3RAWIAmi4VNr1G7cMb_7nSqdiS4ANa2VHMvrS2zsYbZEa8mHle1g4qEWh_T9cuwvW3Dp1ljBuf7CB-9OCH_m-sRlizlBE0wpM4gB-VCtwy3SYLmYOpIUWlwy2WV3fuRMcFRL7_i6f55HfyDLDdcOyNNX1yglX2sVtn83ozPSTQCn9TvvhRCX_P_-CxMN6nE7X39jWriX0UQCZlaEOV_LzkDvtnk2GjTUN1Njn18Rl3Vr-xolPHSVlvMqEGm1EaInsDyF-ULqIYeK8D0LGtQoXOpnTwxOEXgna8qmVtshpPjrnjKpgkF-ODnwxDeA");' &gt;
              &lt;div class="land-background-vedio" &gt;
                  &lt;video id="bgVideo" src="https://storage.coverr.co/videos/5zw015Sp01Yl02Ssb00xeotvrZLRXAzqg02UL?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IkUwMUJBMDU2QzEwQkQzQzk1RDRCIiwiaWF0IjoxNjU4NDc0NzU3fQ.EkvxAeyGRO_0el2byPOaVRUnMoiytadrW7cdVRJ7CCM" poster="https://image.mux.com/5zw015Sp01Yl02Ssb00xeotvrZLRXAzqg02UL/thumbnail.jpg?token=eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InQ5UHZucm9ZY0hQNjhYSmlRQnRHTEVVSkVSSXJ0UXhKIn0.eyJ3aWR0aCI6NjQwLCJ0aW1lIjowLCJleHAiOjMxNzE5MjI1MTA5MiwiYXVkIjoidCIsInN1YiI6IjV6dzAxNVNwMDFZbDAyU3NiMDB4ZW90dnJaTFJYQXpxZzAyVUwifQ.B9894ppuWg8SAfzx36ZkeEBK1c3RAWIAmi4VNr1G7cMb_7nSqdiS4ANa2VHMvrS2zsYbZEa8mHle1g4qEWh_T9cuwvW3Dp1ljBuf7CB-9OCH_m-sRlizlBE0wpM4gB-VCtwy3SYLmYOpIUWlwy2WV3fuRMcFRL7_i6f55HfyDLDdcOyNNX1yglX2sVtn83ozPSTQCn9TvvhRCX_P_-CxMN6nE7X39jWriX0UQCZlaEOV_LzkDvtnk2GjTUN1Njn18Rl3Vr-xolPHSVlvMqEGm1EaInsDyF-ULqIYeK8D0LGtQoXOpnTwxOEXgna8qmVtshpPjrnjKpgkF-ODnwxDeA" autoplay="autoplay" loop="loop" preload="metadata" x5-video-player-type="h5" playsinline="" webkit-playsinline="" muted="muted"&gt;&lt;/video&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="land-main main-vhcheck" &gt;
              &lt;div class="land-main-info" &gt;
                  &lt;div class="land-list-drag"&gt;
                      &lt;span&gt;
                          
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Thanks in advance</p>