CSS Image gallery page has less margin space than other pages? How to get clean uniform layout look across all pages?

Hello I am a (c)rusty amateur web designer making a site as a favour just looking for a little advice...my problem is when you click on my css image gallery page it doesn't preview on Safari exactly exactly like other pages on my site. The margins look smaller as the top image of the gallery appear's closer to the edges than the images on other pages. I have used the same layout and margins for every page so I can't figure it. The images I use on some other pages all fit perfectly and every image I am using have the same width of 2500px. Is there a simple fix to make all my pages uniform when browsing page to page? Hopefully someone can help thanks in advance!

//Other page image html example

<img src="images/imgentry.jpg" alt="The front entrance to the villa..." width="100%" height="100%" title="The front entrance to the villa..." margin-left= "5%" margin-right="5%"/>

// Image gallery html

<style>
        body {
  font-family: Arial;
  margin: 0;
}

* {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
}

.container {
  position: relative;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 16.66%;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}
    </style>
<div class="container">
  <div class="mySlides">
    <div class="numbertext">1 / 15</div>
    <img src="images/entree1.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <div class="numbertext">2 / 15</div>
    <img src="images/imgdrone.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <div class="numbertext">3 / 15</div>
    <img src="images/imgdronepool.jpg" style="width:100%">
  </div>
    
  <div class="mySlides">
    <div class="numbertext">4 / 15</div>
    <img src="images/imglivtopond.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <div class="numbertext">5 / 15</div>
    <img src="images/imglivtodin.jpg" style="width:100%">
  </div>
    
  <div class="mySlides">
    <div class="numbertext">6 / 15</div>
    <img src="images/imglivtohall.jpg" style="width:100%">
  </div>
    <div class="mySlides">
    <div class="numbertext">7 / 15</div>
    <img src="images/imgpiscine.jpg" style="width:100%">
  </div>
    <div class="mySlides">
    <div class="numbertext">8 / 15</div>
    <img src="images/imgview.jpg" style="width:100%">
  </div>
    <div class="mySlides">
    <div class="numbertext">9 / 15</div>
    <img src="images/imgpond.jpg" style="width:100%">
  </div>
    <div class="mySlides">
    <div class="numbertext">10 / 15</div>
    <img src="images/imgarch.jpg" style="width:100%">
  </div>
  <div class="mySlides">
    <div class="numbertext">11 / 15</div>
    <img src="images/imgoffroom.jpg" style="width:100%">
  </div>
  <div class="mySlides">
    <div class="numbertext">12 / 15</div>
    <img src="images/imgenroom.jpg" style="width:100%">
  </div>
  <div class="mySlides">
    <div class="numbertext">13 / 15</div>
    <img src="images/imgbathroom.jpg" style="width:100%">
  </div>
  <div class="mySlides">
    <div class="numbertext">14 / 15</div>
    <img src="images/imgupkitch.jpg" style="width:100%">
  </div>
  <div class="mySlides">
    <div class="numbertext">15 / 15</div>
    <img src="images/imgoutkitchen.jpg" style="width:100%">
  </div>
  <div class="mySlides">
    <div class="numbertext">16 / 15</div>
    <img src="images/imgdownapt.jpg" style="width:100%">
  </div>
  <div class="mySlides">
    <div class="numbertext">17 / 15</div>
    <img src="images/imgdownkitch.jpg" style="width:100%">
  </div>
    
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>

  <div class="caption-container">
    <p id="caption"></p>
  </div>
    
<div class="row">
    <div class="column">
      <img class="demo cursor" src="images/entree1.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Front Entrance">
    </div>
    <div class="column">
      <img class="demo cursor" src="images/imgdrone.jpg" style="width:100%" onclick="currentSlide(2)" alt="Above the Villa">
    </div>
    <div class="column">
      <img class="demo cursor" src="images/imgdronepool.jpg" style="width:100%" onclick="currentSlide(3)" alt="Swimming pool">
    </div>
    <div class="column">
      <img class="demo cursor" src="images/imglivtopond.jpg" style="width:100%" onclick="currentSlide(4)" alt="Relax in the living room 1">
    </div>
    <div class="column">
      <img class="demo cursor" src="images/imglivtodin.jpg" style="width:100%" onclick="currentSlide(5)" alt="Living room 2">
    </div>    
    <div class="column">
      <img class="demo cursor" src="images/imglivtohall.jpg" style="width:100%" onclick="currentSlide(6)" alt="Living room 3">
    </div>
    <div class="column">
      <img class="demo cursor" src="images/imgpiscine.jpg" style="width:100%" onclick="currentSlide(7)" alt="Swimming Pool 2">
    </div>
    <div class="column">
      <img class="demo cursor" src="images/imgview.jpg" style="width:100%" onclick="currentSlide(8)" alt="View to St Paul de Vence">
    </div>
    <div class="column">
      <img class="demo cursor" src="images/imgpond.jpg" style="width:100%" onclick="currentSlide(9)" alt="Japanese Garden">
    </div>
    <div class="column">
      <img class="demo cursor" src="images/imgarch.jpg" style="width:100%" onclick="currentSlide(10)" alt="Archway to third garden">
    </div>
    <div class="column">
      <img class="demo cursor" src="images/imgoffroom.jpg" style="width:100%" onclick="currentSlide(11)" alt="Bedroom">
    </div>
    <div class="column">
      <img class="demo cursor" src="images/imgenroom.jpg" style="width:100%" onclick="currentSlide(12)" alt="Bedroom with Shower Room">
    </div>
    <div class="column">
      <img class="demo cursor" src="images/imgbathroom.jpg" style="width:100%" onclick="currentSlide(13)" alt="Bathroom">
    </div>
    <div class="column">
      <img class="demo cursor" src="images/imgupkitch.jpg" style="width:100%" onclick="currentSlide(14)" alt="Kitchen">
    </div>
    <div class="column">
      <img class="demo cursor" src="images/imgoutkitchen.jpg" style="width:100%" onclick="currentSlide(15)" alt="Outdoor Kitchen">
    </div>
    <div class="column">
      <img class="demo cursor" src="images/imgdownapt.jpg" style="width:100%" onclick="currentSlide(16)" alt="Downstairs Apartment">
    </div>
    <div class="column">
      <img class="demo cursor" src="images/imgdownkitch.jpg" style="width:100%" onclick="currentSlide(17)" alt="Downstairs Kitchen">
    </div>
</div>
</div>

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>

//CSS Code for site

@charset "UTF-8";

body {
    color: #f2f2f2;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
    font-style: normal;
    font-variant: normal;
    background-color: #333;
    padding-right: 5%;
    padding-left: 5%;
}
h1 {
    color: #A94705;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: bolder;
    font-stretch: extra-expanded;
}
h2 {
    color: #A94705;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-stretch: extra-expanded;
    text-align: left;
}