title: Different display of image in website in different laptop resolution
body: <p>
  I design my website in my laptop that have resolution 1600 x 900 and it goes like this <a href="https://i.stack.imgur.com/8MGDK.jpg" rel="nofollow noreferrer">image here</a> but when I change my laptop resolution to 1920 x 1080 there is a gap between the image and the navigation bar <a href="https://i.stack.imgur.com/gpAal.jpg" rel="nofollow noreferrer">like this</a></p>
  
  <p>
  This is my code for the image in resolution 1600 x 900 </p>
  
  <pre><code>#home1 {
      background-image: url(breather.jpg);
      height: 100vh;
      background-repeat: no-repeat;
      background-size: cover;
      width: 78%;
      margin-left: auto;
      position: relative;
  }
  </code></pre>
  
  <p>
  How can I remove the gap in 1920 x 1080 resolution? Thankyou.</p>
  
  
  
  <p>EDITED 
  this is my full code of website</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;title&gt;Home&lt;/title&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="w3.css"&gt;
  &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins"&gt;
  &lt;link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;style&gt;
  body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif}
  body {font-size:16px; background-color: #f4f4f4;}
  .w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}
  .w3-half img:hover{opacity:1}
  .mySlideshiw {display:none}
  .centered {
      position: absolute;
      top: 40%;
      left: 0;
      right: 0;
      text-align: center;
      margin: auto;
      font-family: 'Times New Roman';
      font-size: 2em;
      /*background-color: white;
      background-color: rgba(255,255,255,0.1);*/
  }
  .centered1 {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      text-align: center;
      margin: auto;
      font-family: Aharoni;
      font-size: 3em;
      background-color: white;
      background-color: rgba(255,255,255,0.5);
  }
  
  #home1 {
      background-image: url(breather.jpg);
      height: 100vh;
      background-repeat: no-repeat;
      background-size: cover;
      width: 78%;
      margin-left: auto;
      position: relative;
  }
  
  #home2 {
      background-image: url(gambar6.jpg);
      height: 100vh;
      background-repeat: no-repeat;
      background-size: cover;
      width: 78%;
      margin-left: auto;
      position: relative;
  }
  
  #home3 {
      background-image: url(gambar4.jpg);
      height: 100vh;
      background-repeat: no-repeat;
      background-size: cover;
      width: 78%;
      margin-left: auto;
      position: relative;
  }
  
  #home4 {
      background-image: url(gambar5.jpg);
      height: 100vh;
      background-repeat: no-repeat;
      background-size: cover;
      width: 78%;
      margin-left: auto;
      position: relative;
  }
  
  #home5 {
      background-image: url(gambar3.jpg);
      height: 100vh;
      background-repeat: no-repeat;
      background-size: cover;
      width: 78%;
      margin-left: auto;
      position: relative;
  }
  
  #hiw1 {
    background-image: url(gambar3.jpg);
    width: 100%;
    height: 100%;
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
    /*margin-left: auto;*/
    /*position: relative;*/
  }
  @media only screen and (max-width: 990px){
      #home1,#home2,#home3,#home4,#home5,#hiw1 {
          width : 100%;
      }
  }
  
  @media only screen and (min-width: 1024px) and (orientation:portrait){
      #home1,#home2,#home3,#home4,#home5,#hiw1 {
          width : 71%;
      }
      nav {
          width: 29% !important;
      }
  }
  
  @media only screen and (max-width: 600px){
      .centered {
          font-size: 1em;
      }
      .centered1 {
          font-size: 1.5em;
      }
  }
  
  
  &lt;/style&gt;
  
  &lt;body&gt;
  &lt;!--button buat balik ke atas--&gt;
  &lt;button onclick="topFunction()" id="myBtn" title="Go to top" class="fa fa-arrow-up"&gt;&lt;/button&gt;
  &lt;!-- Sidebar/menu background-color:#B2FFE6 --&gt;
  &lt;?php
  include "include/navigation_interior.php"
  ?&gt;
  
  &lt;!-- Header/home --&gt;
   &lt;!-- &lt;div  id="home"&gt; --&gt;
      &lt;div id="home1" class="mySlides fade"&gt;
          &lt;div class="centered w3-text-black"&gt;&lt;i&gt;Welcome to our studio!&lt;/i&gt;&lt;/div&gt;
          &lt;div class="centered1 w3-text-black"&gt;WHERE IDEAS MEET THE REALITY.&lt;/div&gt;
      &lt;/div&gt;
      &lt;!--slideshow--&gt;
  
      &lt;div id="home2" class="mySlides fade"&gt;
      &lt;/div&gt;
  
      &lt;div id="home3" class="mySlides fade"&gt;
      &lt;/div&gt;
  
      &lt;div id="home4" class="mySlides fade"&gt;
      &lt;/div&gt;
  
      &lt;div id="home5" class="mySlides fade"&gt;
      &lt;/div&gt;
    &lt;!-- &lt;/div&gt; --&gt;
  
  &lt;div style="text-align:center"&gt;
    &lt;span class="dot"&gt;&lt;/span&gt; 
    &lt;span class="dot"&gt;&lt;/span&gt; 
    &lt;span class="dot"&gt;&lt;/span&gt; 
    &lt;span class="dot"&gt;&lt;/span&gt;
    &lt;span class="dot"&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  
  &lt;!-- !PAGE CONTENT! --&gt;
  &lt;div class="w3-main" style="margin-left:340px;margin-right:40px"&gt;
  
    &lt;!-- Services --&gt;
    &lt;div class="w3-container" id="services" style="margin-top:75px"&gt;
      &lt;h1 class="w3-xxxlarge w3-text-teal"&gt;&lt;b&gt;Services.&lt;/b&gt;&lt;/h1&gt;
      &lt;hr class="w3-round w3-text-ijo" style="width:50px;border:5px solid"&gt;
      &lt;p&gt;We are a interior design service that focus on what's best for your home and what's best for you!&lt;/p&gt;
      &lt;p&gt;Some text about our services - what we do and what we offer. We are lorem ipsum consectetur adipiscing 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 consectetur adipiscing 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.
      &lt;/p&gt;
    &lt;/div&gt;
  
     &lt;!-- Projects Photo grid (modal) --&gt;
    &lt;div class="w3-row-padding" id="projects"&gt;
    &lt;h1 class="w3-xxxlarge w3-text-teal"&gt;&lt;b&gt;Real Projects.&lt;/b&gt;&lt;/h1&gt;
    &lt;hr class="w3-round w3-text-ijo" style="width:50px;border:5px solid"&gt;
      &lt;div class="w3-half"&gt;
          &lt;?php 
         include('koneksi.php');
         $query = mysql_query("SELECT e.id,e.image,e.id_designer,d.nama_designer,e.description FROM editproject e JOIN designer d ON e.id_designer = d.id_designer WHERE e.id &lt;=3");
         while($data = mysql_fetch_row($query)){
          echo "&lt;img src='/WEBSITE_1/Gambar/$data[1]' style='width:100%; height:300px;' onclick='onClick(this)' alt='Designed by : $data[3] &lt;br&gt; $data[4]'&gt;";
         }
         ?&gt;
      &lt;/div&gt;
  
      &lt;div class="w3-half"&gt;
        &lt;?php 
         include('koneksi.php');
         $query = mysql_query("SELECT e.id,e.image,e.id_designer,d.nama_designer,e.description FROM editproject e JOIN designer d ON e.id_designer = d.id_designer WHERE e.id &gt; 3 AND e.id &lt; 7");
         while($data = mysql_fetch_row($query)){
          echo "&lt;img src='/WEBSITE_1/Gambar/$data[1]' style='width:100%; height:300px' onclick='onClick(this)' alt='Designed by : $data[3] &lt;br&gt; $data[4]'&gt;";
         }
         ?&gt;
      &lt;/div&gt;
      &lt;!--untuk see more--&gt;
      &lt;a href="fullproject1.php" class="w3-col m4 w3-margin-top"&gt;See our entire projects&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;!-- Modal for full size images on click--&gt;
    &lt;div id="modal01" class="w3-modal w3-black" style="padding-top:0" onclick="this.style.display='none'"&gt;
      &lt;span class="w3-button w3-black w3-xxlarge w3-display-topright"&gt;×&lt;/span&gt;
      &lt;div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64"&gt;
        &lt;img id="img01" class="w3-image"&gt;
        &lt;p id="caption"&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- Designers --&gt;
    &lt;div class="w3-container" id="designers" style="margin-top:75px"&gt;
      &lt;h1 class="w3-xxxlarge w3-text-teal"&gt;&lt;b&gt;Designers.&lt;/b&gt;&lt;/h1&gt;
      &lt;hr class="w3-round w3-text-ijo" style="width:50px;border:5px solid"&gt;
      &lt;p&gt;The best team in the world.&lt;/p&gt;
      &lt;p&gt;We are lorem ipsum consectetur adipiscing 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 consectetur adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      &lt;/p&gt;
      &lt;p&gt;&lt;b&gt;Our designers are :&lt;/b&gt;&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;!-- The Team --&gt;
    &lt;div class="w3-row-padding"&gt;
      &lt;div class="w3-col m4 w3-margin-bottom"&gt;
        &lt;div class="w3-teal"&gt;
          &lt;?php 
          include('koneksi.php');
          $query = mysql_query("SELECT id_designer, nama_designer, description, foto FROM designer WHERE id_designer='D002'");
          while ($row = mysql_fetch_row($query)){
  
          ?&gt;
          &lt;img src="/WEBSITE_1/Gambar/&lt;?php echo $row[3]?&gt;" style="width:100%; height:250px;" alt='image'&gt; 
          &lt;div class="w3-container"&gt;
            &lt;h3&gt;&lt;?php echo $row[1];?&gt;&lt;/h3&gt;
            &lt;b class="w3-text-ijo"&gt;CEO &amp; Founder&lt;/b&gt;
            &lt;p&gt;&lt;?php echo $row[2];?&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;?php }?&gt;
      &lt;/div&gt;
  
      &lt;div class="w3-col m4 w3-margin-bottom"&gt;
        &lt;div class="w3-teal"&gt;
          &lt;?php 
          include('koneksi.php');
          $query = mysql_query("SELECT id_designer, nama_designer, description, foto FROM designer WHERE id_designer='D138'");
          while ($row = mysql_fetch_row($query)){
  
          ?&gt;
          &lt;img src="/WEBSITE_1/Gambar/&lt;?php echo $row[3]?&gt;" style="width:100%; height:250px;" alt='image'&gt; 
          &lt;div class="w3-container"&gt;
            &lt;h3&gt;&lt;?php echo $row[1];?&gt;&lt;/h3&gt;
            &lt;b class="w3-text-ijo"&gt;CEO &amp; Founder&lt;/b&gt;
            &lt;p&gt;&lt;?php echo $row[2];?&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;?php }?&gt;
      &lt;/div&gt;
  
      &lt;div class="w3-col m4 w3-margin-bottom"&gt;
        &lt;div class="w3-teal"&gt;
          &lt;?php 
          include('koneksi.php');
          $query = mysql_query("SELECT id_designer, nama_designer, description, foto FROM designer WHERE id_designer='D141'");
          while ($row = mysql_fetch_row($query)){
  
          ?&gt;
          &lt;img src="/WEBSITE_1/Gambar/&lt;?php echo $row[3]?&gt;" style="width:100%; height:250px;" alt='image'&gt; 
          &lt;div class="w3-container"&gt;
            &lt;h3&gt;&lt;?php echo $row[1];?&gt;&lt;/h3&gt;
            &lt;b class="w3-text-ijo"&gt;CEO &amp; Founder&lt;/b&gt;
            &lt;p&gt;&lt;?php echo $row[2];?&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;?php }?&gt;
      &lt;/div&gt;
  
      &lt;!--untuk see more--&gt;
      &lt;a href="fulldesigner1.php" class="w3-col m4"&gt;See our entire designers&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;!-- Packages / Pricing Tables --&gt;
    &lt;div class="w3-container" id="packages" style="margin-top:75px"&gt;
      &lt;h1 class="w3-xxxlarge w3-text-teal"&gt;&lt;b&gt;Packages.&lt;/b&gt;&lt;/h1&gt;
      &lt;hr class="w3-round w3-text-ijo" style="width:50px;border:5px solid"&gt;
      &lt;p&gt;Some text our prices. Lorem ipsum consectetur adipiscing 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&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="w3-row-padding"&gt;
      &lt;div class="w3-half w3-margin-bottom"&gt;
        &lt;ul class="w3-ul w3-white w3-center"&gt;
          &lt;?php
          include "koneksi.php";
          $query = "SELECT nama_paket FROM package WHERE jenis_paket = '1'";
          $select_all = mysql_query($query);
          $row = mysql_fetch_row($select_all);
          $nama_paket = $row[0];
  
          ?&gt;
          &lt;li class="w3-background-ijotua w3-xlarge w3-padding-32 w3-text-white"&gt;&lt;?php echo $nama_paket; ?&gt;&lt;/li&gt;
          &lt;?php
          include "koneksi.php";
          $query1 = "SELECT jumlah_revisi,jumlah_tampak,keterangan,floorplanning, harga_paket FROM package WHERE jenis_paket = '1'";
          $select = mysql_query($query1);
          $row1 = mysql_fetch_row($select);
            $jumlah_revisi = $row1[0];
            $jumlah_tampak = $row1[1];
            $ket = $row1[2];
            $floor = $row1[3];
            $harga = $row1[4];
  
          ?&gt;
  
          &lt;li class="w3-padding-16"&gt;&lt;?php echo $jumlah_revisi; ?&gt;&lt;/li&gt;
          &lt;li class="w3-padding-16"&gt;&lt;?php echo $jumlah_tampak; ?&gt;&lt;/li&gt;
          &lt;li class="w3-padding-16"&gt;&lt;?php echo $ket; ?&gt;&lt;/li&gt;
          &lt;li class="w3-padding-16"&gt;&lt;?php echo $floor; ?&gt;&lt;/li&gt;
          &lt;li class="w3-padding-16"&gt;&lt;h2&gt;Rp. &lt;?php echo $harga; ?&gt;&lt;/h2&gt;
          &lt;span class="w3-opacity"&gt;per room&lt;/span&gt;
          &lt;/li&gt;
  
          &lt;li class="w3-white w3-padding-24"&gt;
            &lt;a href="signup.php"&gt;&lt;button class="w3-btn w3-background-ijotua w3-padding-large w3-text-white"&gt;Sign Up&lt;/button&gt;&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="w3-half"&gt;
        &lt;ul class="w3-ul w3-white w3-center"&gt;
          &lt;?php
          include "koneksi.php";
          $query = "SELECT nama_paket FROM package WHERE jenis_paket = '2'";
          $select_all = mysql_query($query);
          $row = mysql_fetch_row($select_all);
          $nama_paket = $row[0];
  
          ?&gt;
          &lt;li class="w3-background-birutua w3-xlarge w3-padding-32 w3-text-white"&gt;&lt;?php echo $nama_paket; ?&gt;&lt;/li&gt;
  
          &lt;?php
          include "koneksi.php";
          $query1 = "SELECT jumlah_revisi,jumlah_tampak,keterangan,floorplanning, harga_paket FROM package WHERE jenis_paket = '2'";
          $select = mysql_query($query1);
          $row1 = mysql_fetch_row($select);
            $jumlah_revisi = $row1[0];
            $jumlah_tampak = $row1[1];
            $ket = $row1[2];
            $floor = $row1[3];
            $harga = $row1[4];
  
          ?&gt;
  
          &lt;li class="w3-padding-16"&gt;&lt;?php echo $jumlah_revisi; ?&gt;&lt;/li&gt;
          &lt;li class="w3-padding-16"&gt;&lt;?php echo $jumlah_tampak; ?&gt;&lt;/li&gt;
          &lt;li class="w3-padding-16"&gt;&lt;?php echo $ket; ?&gt;&lt;/li&gt;
          &lt;li class="w3-padding-16"&gt;&lt;?php echo $floor; ?&gt;&lt;/li&gt;
          &lt;li class="w3-padding-16"&gt;&lt;h2&gt;Rp. &lt;?php echo $harga; ?&gt;&lt;/h2&gt;
          &lt;span class="w3-opacity"&gt;per room&lt;/span&gt;
          &lt;/li&gt;
          &lt;li class="w3-white w3-padding-24"&gt;
            &lt;a href="signup.php"&gt;&lt;button class="w3-btn w3-background-birutua w3-padding-large w3-text-white"&gt;Sign Up&lt;/button&gt;&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- How It Works --&gt;
    &lt;div class="w3-container" id="hiw" style="margin-top:75px"&gt;
      &lt;h1 class="w3-xxxlarge w3-text-teal"&gt;&lt;b&gt;How It Works ?&lt;/b&gt;&lt;/h1&gt;
      &lt;hr class="w3-round w3-text-ijo" style="width:50px;border:5px solid"&gt;
      &lt;p&gt;Lorem ipsum consectetur adipiscing 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&lt;/p&gt;
      &lt;div class=""&gt;
        &lt;div class=""&gt;
              &lt;!-- &lt;img class="mySlideshiw" src="gambar3.jpg" style="width:100%"&gt; --&gt;
          &lt;img class="mySlideshiw" src="STEP1.png" style="width:100%"&gt;
          &lt;img class="mySlideshiw" src="STEP2.png" style="width:100%"&gt;
          &lt;img class="mySlideshiw" src="STEP3.png" style="width:100%"&gt;
          &lt;img class="mySlideshiw" src="STEP4.png" style="width:100%"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="w3-center"&gt;
        &lt;div class="w3-section"&gt;
          &lt;button class="w3-button demo" onclick="currentDiv(1)"&gt;1&lt;/button&gt; 
          &lt;button class="w3-button demo" onclick="currentDiv(2)"&gt;2&lt;/button&gt; 
          &lt;button class="w3-button demo" onclick="currentDiv(3)"&gt;3&lt;/button&gt;
          &lt;button class="w3-button demo" onclick="currentDiv(4)"&gt;4&lt;/button&gt;  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;    
  
    &lt;!-- Testimony --&gt;
    &lt;div class="w3-container" id="testimony" style="margin-top:75px"&gt;
      &lt;h1 class="w3-xxxlarge w3-text-teal"&gt;&lt;b&gt;Testimony&lt;/b&gt;&lt;/h1&gt;
      &lt;hr class="w3-round w3-text-ijo" style="width:50px;border:5px solid"&gt;
      &lt;p&gt;Lorem ipsum consectetur adipiscing 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&lt;/p&gt;
      &lt;a href="fulltestimony.php"&gt;&lt;button class="w3-btn w3-background-birutua w3-padding-large w3-text-white"&gt;See All Testimony&lt;/button&gt;&lt;/a&gt;
    &lt;/div&gt;
  
  &lt;!-- End page content --&gt;
  &lt;?php include "include/footer_interior.php";
  ?&gt;
  
  &lt;/div&gt;
  
  &lt;script&gt;
  // Script to open and close sidebar
  function w3_open() {
      document.getElementById("mySidebar").style.display = "block";
      document.getElementById("myOverlay").style.display = "block";
  }
  
  function w3_close() {
      document.getElementById("mySidebar").style.display = "none";
      document.getElementById("myOverlay").style.display = "none";
  }
  
  // Modal Image Gallery
  function onClick(element) {
    document.getElementById("img01").src = element.src;
    document.getElementById("modal01").style.display = "block";
    var captionText = document.getElementById("caption");
    captionText.innerHTML = element.alt;
  }
  
  //untuk slideshow
  var slideIndex = 0;
  showSlides();
  
  function showSlides() {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("dot");
      for (i = 0; i &lt; slides.length; i++) {
         slides[i].style.display = "none";  
      }
      slideIndex++;
      if (slideIndex &gt; slides.length) {slideIndex = 1}    
      for (i = 0; i &lt; dots.length; i++) {
          dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex-1].style.display = "block";  
      dots[slideIndex-1].className += " active";
      setTimeout(showSlides, 3000); // Change image every 2 seconds
  }
  //tombol back to top
  // When the user scrolls down 20px from the top of the document, show the button
  window.onscroll = function() {scrollFunction()};
  
  function scrollFunction() {
      if (document.body.scrollTop &gt; 20 || document.documentElement.scrollTop &gt; 20) {
          document.getElementById("myBtn").style.display = "block";
      } else {
          document.getElementById("myBtn").style.display = "none";
      }
  }
  
  // When the user clicks on the button, scroll to the top of the document
  function topFunction() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
  }
  
  //Slideshow HIW
  var slideIndex = 1;
  showDivs(slideIndex);
  
  function plusDivs(n) {
    showDivs(slideIndex += n);
  }
  
  function currentDiv(n) {
    showDivs(slideIndex = n);
  }
  
  function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlideshiw");
    var dots = document.getElementsByClassName("demo");
    if (n &gt; x.length) {slideIndex = 1}    
    if (n &lt; 1) {slideIndex = x.length}
    for (i = 0; i &lt; x.length; i++) {
       x[i].style.display = "none";  
    }
    for (i = 0; i &lt; dots.length; i++) {
       dots[i].className = dots[i].className.replace(" w3-red", "");
    }
    x[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " w3-red";
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  enter code here
  </code></pre>
  
  <p>when i try to inspect the element the gap was the margin-left
  <a href="https://i.stack.imgur.com/xvShi.png" rel="nofollow noreferrer">enter image description here</a></p>