title: Why does the resolution vary depending on what page I am (html/css) Chrome only
body: <p>I'm trying to build a website with different pages. But the resolution varies depending on which page I am on. This screws with my navbar.</p>
  <p>My head looks like the following:</p>
  <p>Index:</p>
  <pre><code>&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Index&lt;/title&gt;
    &lt;link href=&quot;../vendor/bootstrap/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
    &lt;link href=&quot;../css/style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
    &lt;link href=&quot;../img/favicon.ico&quot; rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot;&gt;
    &lt;link href=&quot;../js/javascript.js&quot;&gt;
  &lt;/head&gt; 
  &lt;!DOCTYPE html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;brand&lt;/title&gt;
    &lt;link href=&quot;../vendor/bootstrap/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
    &lt;link href=&quot;../css/style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
    &lt;link href=&quot;../img/favicon.ico&quot; rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot;&gt;
    &lt;link href=&quot;../js/javascript.js&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;script src=&quot;https://code.jquery.com/jquery-2.1.3.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;../vendor/bootstrap/js/bootstrap.js&quot;&gt;&lt;/script&gt;
    &lt;link href=&quot;../vendor/bootstrap/js/bootstrap.min.js&quot;&gt;
  
    &lt;nav class=&quot;navbar navbar-expand-md navbar-dark&quot;&gt;
      &lt;!-- Toggler/collapsibe Button --&gt;
      &lt;button 
        class=&quot;navbar-toggler&quot; 
        type=&quot;button&quot; 
        data-toggle=&quot;collapse&quot; 
        data-target=&quot;.navbar-collapse&quot;&gt;
        &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
      &lt;/button&gt;
    
      
      &lt;!-- Brand --&gt;
      &lt;div class=&quot;contains-brand-icon&quot;&gt;
        &lt;a class=&quot;navbar-brand&quot; href=&quot;index.html&quot;&gt;
          &lt;img src=&quot;../img/Web-brand.png&quot; loading=&quot;lazy&quot; srcset=&quot;../img/Web-brand-p-500.png 500w, ../img/Web-brand-p-800.png 800w, ../img/Web-brand-p-1080.png 1080w, ../img/Web-brand.png 1590w&quot; alt=&quot;&quot; height=&quot;40&quot; id=&quot;brand-icon-navbar&quot; class=&quot;justify-content-center&quot;&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    
      
      &lt;!-- Navbar --&gt;
      &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;collapsibleNavbar&quot;&gt;
        &lt;ul class=&quot;navbar-nav&quot;&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;brand-app.html&quot;&gt;BrandApp&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;brand für Unternehmen&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;brand für Organisationen&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Kampangen&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Über uns&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Support&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  
    &lt;div class=&quot;fixed-top&quot;&gt;
      &lt;nav&gt;
        &lt;div class=&quot;navBar&quot;&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;a href=&quot;index.html&quot;&gt;&lt;img src=&quot;../img/Web-brand.png&quot; loading=&quot;lazy&quot; srcset=&quot;../img/Web-brand-p-500.png 500w, ../img/Web-brand-p-800.png 800w, ../img/Web-brand-p-1080.png 1080w, ../img/Web-brand.png 1590w&quot; alt=&quot;&quot; id=&quot;navbar-icon-brand&quot;&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;brand-app.html&quot;&gt;BrandApp&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;brand für Unternehmen&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;brand für Organisationen&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Kampangen&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Über uns&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Support&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  
    &lt;div class=&quot;introduction-brand&quot;&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;introduction-brand-innerpart&quot;&gt;
            &lt;h1 class=&quot;heading&quot;&gt;brand App&lt;/h1&gt;
            &lt;div class=&quot;sub-heading&quot;&gt;Spenden wird kostenlos.&lt;/div&gt;
            &lt;div class=&quot;sub-sub-heading&quot;&gt;Ohne Anmeldung, versteckte Kosten oder Abonnements.&lt;/div&gt;
            &lt;div class=&quot;linking&quot;&gt;
              &lt;a href=&quot;index.html&quot;&gt;Weitere Infos &amp;gt;&lt;/a&gt;
              &lt;a href=&quot;index.html&quot;&gt;Herunterladen &amp;gt;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id=&quot;cut-phones&quot;&gt;
            &lt;div id=&quot;cut-phones&quot; class=&quot;col-sm-12 mobile-presentation&quot;&gt;
              &lt;img src=&quot;../img/smartmockups_kldnit2k.png&quot; loading=&quot;lazy&quot; width=&quot;310&quot; sizes=&quot;(max-width: 479px) 100vw, 310px&quot; srcset=&quot;../img/smartmockups_kldnit2k-p-500.png 500w, ../img/smartmockups_kldnit2k-p-800.png 800w, ../img/smartmockups_kldnit2k-p-1080.png 1080w, ../img/smartmockups_kldnit2k.png 1570w&quot; alt=&quot;&quot; class=&quot;mobile-presentation-leftest&quot;&gt;
              &lt;img src=&quot;../img/smartmockups_kldnk32x.png&quot; loading=&quot;lazy&quot; width=&quot;350&quot; sizes=&quot;(max-width: 479px) 100vw, 350px&quot; srcset=&quot;../img/smartmockups_kldnk32x-p-500.png 500w, ../img/smartmockups_kldnk32x-p-800.png 800w, ../img/smartmockups_kldnk32x-p-1080.png 1080w, ../img/smartmockups_kldnk32x.png 1570w&quot; alt=&quot;&quot; class=&quot;mobile-presentation-left&quot;&gt;
              &lt;img src=&quot;../img/smartmockups_kldneqvz.png&quot; loading=&quot;lazy&quot; width=&quot;310&quot; sizes=&quot;(max-width: 479px) 100vw, 310px&quot; srcset=&quot;../img/smartmockups_kldneqvz-p-500.png 500w, ../img/smartmockups_kldneqvz-p-800.png 800w, ../img/smartmockups_kldneqvz-p-1080.png 1080w, ../img/smartmockups_kldneqvz.png 1571w&quot; alt=&quot;&quot; class=&quot;mobile-presentation-rightest&quot;&gt;
              &lt;img src=&quot;../img/smartmockups_kldnfsiz.png&quot; loading=&quot;lazy&quot; width=&quot;350&quot; sizes=&quot;(max-width: 479px) 100vw, 350px&quot; srcset=&quot;../img/smartmockups_kldnfsiz-p-500.png 500w, ../img/smartmockups_kldnfsiz-p-800.png 800w, ../img/smartmockups_kldnfsiz-p-1080.png 1080w, ../img/smartmockups_kldnfsiz.png 1571w&quot; alt=&quot;&quot; class=&quot;mobile-presentation-right&quot;&gt;
              &lt;img src=&quot;../img/smartmockups_kldnld5u.png&quot; loading=&quot;lazy&quot; width=&quot;380&quot; sizes=&quot;(max-width: 479px) 100vw, 380px&quot; srcset=&quot;../img/smartmockups_kldnld5u-p-500.png 500w, ../img/smartmockups_kldnld5u-p-800.png 800w, ../img/smartmockups_kldnld5u-p-1080.png 1080w, ../img/smartmockups_kldnld5u.png 1480w&quot; alt=&quot;&quot; class=&quot;mobile-presentation-centre&quot;&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  <p>SecondPage:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;brand App&lt;/title&gt;
    &lt;link href=&quot;../vendor/bootstrap/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
    &lt;link href=&quot;../css/style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
    &lt;link href=&quot;../img/favicon.ico&quot; rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot;&gt;
    &lt;link href=&quot;../js/javascript.js&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;script src=&quot;https://code.jquery.com/jquery-2.1.3.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;../vendor/bootstrap/js/bootstrap.js&quot;&gt;&lt;/script&gt;
    &lt;link href=&quot;../vendor/bootstrap/js/bootstrap.min.js&quot;&gt;
  
    &lt;nav class=&quot;navbar navbar-expand-md navbar-dark&quot;&gt;
      &lt;!-- Toggler/collapsibe Button --&gt;
      &lt;button 
        class=&quot;navbar-toggler&quot; 
        type=&quot;button&quot; 
        data-toggle=&quot;collapse&quot; 
        data-target=&quot;.navbar-collapse&quot;&gt;
        &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
      &lt;/button&gt;
    
      
      &lt;!-- Brand --&gt;
      &lt;div class=&quot;contains-brand-icon&quot;&gt;
        &lt;a class=&quot;navbar-brand&quot; href=&quot;index.html&quot;&gt;
          &lt;img src=&quot;../img/Web-brand.png&quot; loading=&quot;lazy&quot; srcset=&quot;../img/Web-brand-p-500.png 500w, ../img/Web-brand-p-800.png 800w, ../img/Web-brand-p-1080.png 1080w, ../img/Web-brand.png 1590w&quot; alt=&quot;&quot; height=&quot;40&quot; id=&quot;brand-icon-navbar&quot; class=&quot;justify-content-center&quot;&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    
      
      &lt;!-- Navbar --&gt;
      &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;collapsibleNavbar&quot;&gt;
        &lt;ul class=&quot;navbar-nav&quot;&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;BrandApp&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;brand für Unternehmen&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;brand für Organisationen&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Kampangen&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Über uns&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Support&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  
    &lt;div class=&quot;fixed-top&quot;&gt;
      &lt;nav&gt;
        &lt;div class=&quot;navBar&quot;&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;a href=&quot;index.html&quot;&gt;&lt;img src=&quot;../img/Web-brand.png&quot; loading=&quot;lazy&quot; srcset=&quot;../img/Web-brand-p-500.png 500w, ../img/Web-brand-p-800.png 800w, ../img/Web-brand-p-1080.png 1080w, ../img/Web-brand.png 1590w&quot; alt=&quot;&quot; id=&quot;navbar-icon-brand&quot;&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;BrandApp&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;brand für Unternehmen&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;brand für Organisationen&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Kampangen&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Über uns&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Support&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  
    &lt;div class=&quot;introduction-brand-app&quot;&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-sm-12 mobile-presentation-brand-app&quot;&gt;
                  &lt;img src=&quot;../img/smartmockups_kldnit2k.png&quot; loading=&quot;lazy&quot; width=&quot;310&quot; sizes=&quot;(max-width: 479px) 100vw, 310px&quot; srcset=&quot;../img/smartmockups_kldnit2k-p-500.png 500w, ../img/smartmockups_kldnit2k-p-800.png 800w, ../img/smartmockups_kldnit2k-p-1080.png 1080w, ../img/smartmockups_kldnit2k.png 1570w&quot; alt=&quot;&quot; class=&quot;mobile-presentation-leftest-brand-app&quot;&gt;
                  &lt;img src=&quot;../img/smartmockups_kldnk32x.png&quot; loading=&quot;lazy&quot; width=&quot;350&quot; sizes=&quot;(max-width: 479px) 100vw, 350px&quot; srcset=&quot;../img/smartmockups_kldnk32x-p-500.png 500w, ../img/smartmockups_kldnk32x-p-800.png 800w, ../img/smartmockups_kldnk32x-p-1080.png 1080w, ../img/smartmockups_kldnk32x.png 1570w&quot; alt=&quot;&quot; class=&quot;mobile-presentation-left-brand-app&quot;&gt;
                  &lt;img src=&quot;../img/smartmockups_kldneqvz.png&quot; loading=&quot;lazy&quot; width=&quot;310&quot; sizes=&quot;(max-width: 479px) 100vw, 310px&quot; srcset=&quot;../img/smartmockups_kldneqvz-p-500.png 500w, ../img/smartmockups_kldneqvz-p-800.png 800w, ../img/smartmockups_kldneqvz-p-1080.png 1080w, ../img/smartmockups_kldneqvz.png 1571w&quot; alt=&quot;&quot; class=&quot;mobile-presentation-rightest-brand-app&quot;&gt;
                  &lt;img src=&quot;../img/smartmockups_kldnfsiz.png&quot; loading=&quot;lazy&quot; width=&quot;350&quot; sizes=&quot;(max-width: 479px) 100vw, 350px&quot; srcset=&quot;../img/smartmockups_kldnfsiz-p-500.png 500w, ../img/smartmockups_kldnfsiz-p-800.png 800w, ../img/smartmockups_kldnfsiz-p-1080.png 1080w, ../img/smartmockups_kldnfsiz.png 1571w&quot; alt=&quot;&quot; class=&quot;mobile-presentation-right-brand-app&quot;&gt;
                  &lt;img src=&quot;../img/smartmockups_kldnld5u.png&quot; loading=&quot;lazy&quot; width=&quot;380&quot; sizes=&quot;(max-width: 479px) 100vw, 380px&quot; srcset=&quot;../img/smartmockups_kldnld5u-p-500.png 500w, ../img/smartmockups_kldnld5u-p-800.png 800w, ../img/smartmockups_kldnld5u-p-1080.png 1080w, ../img/smartmockups_kldnld5u.png 1480w&quot; alt=&quot;&quot; class=&quot;mobile-presentation-centre-brand-app&quot;&gt;
                &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>/**
   * index
   */
  
  html, body { 
      max-width: 100%;
      overflow-x: hidden;
  }
  
  
  
  body {
      margin: 0;
      background-color: #faf9f9;
      
  }
  
  .fixed-top{
      display: none;
  }
  
  @media (min-width: 768px) { 
      .fixed-top{
          display: inline-block;
          width: 100%;
      }
  
      .navbar{
          display: none;
      }
  
      nav {
          height: 44px;
          
          background: rgba(0,0,0,0.93);
      }
      
      nav ul {
          display: flex;
          height: 44px;
          justify-content: space-around;
          align-items: center;
          padding: 0;
          margin: 0 auto;
          list-style-type: none;
      }
      
      
      nav a {
          display: block;
          color: white;
          font-size: 15px;
          font-weight: lighter;
          text-decoration: none;
          transition: 0.3s;
      }
      
      nav a:hover {
          color: #B8B8B8;
          text-decoration: none;
      }
        
      .navBar {
          max-width: 980px;
          margin: 0 auto;
      }
  }
  
  #collapsibleNavbar{
      justify-content: center;
      text-align: center;
  }
  
  .nav-item a{
      border-top: 1px solid grey;
      font-size: 15px;
      font-weight: lighter;
      transition: 0.3s;
  }
  
  .navbar-brand {
      transform: translateX(-50%);
      left: 50%;
      position: absolute;
      top: 0;
      margin-top: 8px;
  }
  
  #navbar-icon-brand {
      height: 55px;
  }
  
  
  .navbar{
      background: rgba(0,0,0,0.93);
      overflow: hidden;
  }
  
  .navbar-toggler {
      border-color: rgba(0,0,0,0)!important;
  }
  
  .introduction-brand-innerpart {
      margin: 0 auto;
      margin-top: 4rem;
      margin-bottom: 2rem;
      text-align: center;
      width: 100%;
  }
  
  @media(min-width: 768px){
      
      #navbar-icon-brand {
          margin-top: 5px;
          height: 40px;
      }
      
      .introduction-brand-innerpart {
          margin: 0 auto;
          margin-top: 8rem;
          margin-bottom: 4rem;
          text-align: center;
          width: 100%;
      }
  }
  
  .heading {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin-right: auto;
      margin-left: auto;
      margin-bottom: 0;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
      color: #000;
      font-size: 36px;
      font-weight: 400;
      text-align: center;
  }
  
  .sub-heading {
      margin-top: 0px;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin-right: auto;
      margin-left: auto;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      color: #000;
      font-size: 21px;
      font-weight: 300;
  }
  
  .sub-sub-heading {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin-top: -5px;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      color: #a6a6a6;
      font-size: 13px;
      font-weight: lighter;
    }
  
  .linking {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin-top: 10px;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      font-size: 17px;
      font-weight: 400;
  }
  
  .linking a{
      display: block;
      font-size: 11px;
      text-decoration: none;
      transition: 0.3s;
      padding-right: 20px;
      padding-left: 20px;
      font-weight: bolder;
  }
  
  @media (min-width: 576px) { 
      .heading {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          margin-right: auto;
          margin-left: auto;
          margin-bottom: 0;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;
          font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
          color: #000;
          font-size: 50px;
          font-weight: 400;
      }
      
      .sub-heading {
          margin-top: -10px;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          margin-right: auto;
          margin-left: auto;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;
          color: #000;
          font-size: 26px;
          font-weight: 300;
      }
      
      .sub-sub-heading {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          margin-top: -5px;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;
          color: #a6a6a6;
          font-size: 15px;
          font-weight: lighter;
        }
      
      .linking {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          margin-top: 10px;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;
          font-size: 14px;
          font-weight: 400;
      }
      
      .linking a{
          display: block;
          font-size: 14px;
          text-decoration: none;
          transition: 0.3s;
          padding-right: 35px;
          padding-left: 35px;
          font-weight: bolder;
      }
  }
  
  
  
  @media (min-width: 992px) { 
      .heading {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          margin-right: auto;
          margin-left: auto;
          margin-bottom: 0;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;
          font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
          color: #000;
          font-size: 80px;
          font-weight: 400;
      }
      
      .sub-heading {
          margin-top: -10px;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          margin-right: auto;
          margin-left: auto;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;
          color: #000;
          font-size: 32px;
          font-weight: 300;
      }
      
      .sub-sub-heading {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          margin-top: -5px;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;
          color: #a6a6a6;
          font-size: 20px;
          font-weight: lighter;
        }
      
      .linking {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          margin-top: 10px;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;
          font-size: 17px;
          font-weight: 400;
      }
      
      .linking a{
          display: block;
          font-size: 15px;
          text-decoration: none;
          transition: 0.3s;
          padding-right: 35px;
          padding-left: 35px;
          font-weight: bolder;
      }
  }
  
  
  .mobile-presentation {
      position: relative;
      margin-top: auto;
      margin-right: auto;
      margin-left: auto;
      border: 1px none #000;
      background-color: hsla(0, 0%, 98.4%, 0);
      left: -50%;
      text-align: center;
  }
  
  .mobile-presentation-leftest {
      position: absolute;
      display: block;
      margin-top: 40px;
      margin-right: auto;
      margin-left: -70px;
      width: 150px;
      height: auto;
  }
  
  .mobile-presentation-left {
      position: absolute;
      display: block;
      margin-top: 25px;
      margin-right: auto;
      margin-left: -45px;
      width: 160px;
      height: auto;
  }
  
  .mobile-presentation-rightest {
      position: absolute;
      display: block;
      margin-top: 40px;
      margin-right: auto;
      margin-left: 85px;
      width: 150px;
      height: auto;
  }
  
  .mobile-presentation-right {
      position: absolute;
      display: block;
      margin-top: 25px;
      margin-right: auto;
      margin-left: 51px;
      width: 160px;
      height: auto;
  }
  
  .mobile-presentation-centre {
      position: relative;
      display: block;
      margin-top: 0;
      margin-right: auto;
      margin-left: auto;
      width: 170px;
      height: auto;
  }
  
  @media (min-width: 576px) {
      .mobile-presentation-leftest {
          position: absolute;
          display: block;
          margin-top: 40px;
          margin-right: auto;
          margin-left: -110px;
          width: 170px;
          height: auto;
      }
      
      .mobile-presentation-left {
          position: absolute;
          display: block;
          margin-top: 25px;
          margin-right: auto;
          margin-left: -70px;
          width: 190px;
          height: auto;
      }
      
      .mobile-presentation-rightest {
          position: absolute;
          display: block;
          margin-top: 40px;
          margin-right: auto;
          margin-left: 135px;
          width: 170px;
          height: auto;
      }
      
      .mobile-presentation-right {
          position: absolute;
          display: block;
          margin-top: 25px;
          margin-right: auto;
          margin-left: 77px;
          width: 190px;
          height: auto;
      }
      
      .mobile-presentation-centre {
          position: relative;
          display: block;
          margin-top: 0;
          margin-right: auto;
          margin-left: auto;
          width: 200px;
          height: auto;
      }
  }
  
  @media (min-width: 992px) {
      .mobile-presentation {
          position: relative;
          margin-top: auto;
          margin-right: auto;
          margin-left: auto;
          border: 1px none #000;
          background-color: hsla(0, 0%, 98.4%, 0);
          left: -50%;
      }
      
      .mobile-presentation-leftest {
          position: relative;
          display: block;
          margin-top: 134px;
          margin-right: auto;
          margin-left: 11px;
          width: auto;
      }
      
      .mobile-presentation-left {
          position: relative;
          display: block;
          margin-top: -504px;
          margin-right: auto;
          margin-left: 90px;
          width: auto;
      }
      
      .mobile-presentation-rightest {
          position: relative;
          display: block;
          margin-top: -508px;
          margin-right: auto;
          margin-left: 585px;
          width: auto;
      }
      
      .mobile-presentation-right {
          position: relative;
          display: block;
          margin-top: -504px;
          margin-right: auto;
          margin-left: 465px;
          width: auto;
      }
      
      .mobile-presentation-centre {
          position: relative;
          display: block;
          margin-top: -584px;
          margin-right: auto;
          margin-left: auto;
          width: auto;
      }
  }
  
  #cut-phones {
      height: 350px;
      position: static;
      margin-top: auto;
      margin-right: auto;
      margin-left: auto;
      border: 1px none #000;
      background-color: hsla(0, 0%, 98.4%, 0);
      left: -50%;
      
  }
  
  /**
   *
   * Brand App
   *
   */
  
   .mobile-presentation-brand-app {
      position: relative;
      margin-top: 14rem;
      margin-right: auto;
      margin-left: auto;
      border: 1px none #000;
      background-color: hsla(0, 0%, 98.4%, 0);
  }
  
  .mobile-presentation-leftest-brand-app  {
  position: relative;
  display: block;
  margin-top: 134px;
  margin-right: auto;
  margin-left: 122px;
  width: auto;
  }
  
  .mobile-presentation-left-brand-app  {
  position: relative;
  display: block;
  margin-top: -504px;
  margin-right: auto;
  margin-left: 212px;
  width: auto;
  }
  
  .mobile-presentation-rightest-brand-app  {
  position: relative;
  display: block;
  margin-top: -508px;
  margin-right: auto;
  margin-left: 656px;
  width: auto;
  }
  
  .mobile-presentation-right-brand-app  {
  position: relative;
  display: block;
  margin-top: -504px;
  margin-right: auto;
  margin-left: 535px;
  width: auto;
  }
  
  .mobile-presentation-centre-brand-app  {
  position: relative;
  display: block;
  margin-top: -584px;
  margin-right: auto;
  margin-left: auto;
  width: auto;
  }
  
  </code></pre>
  <p>I thought the problem might come from my head, but as you can see, they are identical.</p>
  <p>The resolutions are the following:</p>
  <p>Index resolution: 1903 x 733</p>
  <p><img src="https://i.stack.imgur.com/2fZNA.png" alt="picture from where I got the resolution for index page" /></p>
  <p>SecondPage resolution: 2114.44 x 904.12</p>
  <p><img src="https://i.stack.imgur.com/kGoFj.png" alt="picture from where I got the resolution for second page" /></p>
  <p>The resolution doesn't differ, even when I delete all html code.</p>
  <p>The resolution difference is done by my browser. When I look at the responsive design of the site, everything is fine. But as soon as I start to use the site without the responsive tool by Chrome, the navbar starts moving when I switch from one page to another. This is because the resolution of the second page is wider than my index page.</p>
  <p>I just tried the site on Edge. Everything works fine there. The site does not become wider by itself. But this still doesn't fix my problem on Chrome.</p>
  <p>Any idea why Chrome behaves so weird?</p>