JS messes with the positioning of slideshow

Question

I want to build a slideshow using this code that dsonesuk provided at the W3Forum.
I modified it in order to come close to what I want. Now the JS does two strange things to the position of the slideshow:

1. In smaller (ex. mobile) browser windows, #myslideFrame expands in height (and it shouldn't).
2. In larger browser windows (wider than 1260px), the whole slideshow sticks to the left side of the wrapper instead of extending all the way to the right side (of the wrapper).
   

Since I don't exactely know why the JS is behaving like it is, this is the code of the whole page. (Especially the CSS is pretty long, sorry for that. But you can "cmd/Strg + F" for "slideshow" and it will highlight the beginning of the relevant part)
Thank you!

var slideIndex = 0;
var t;
var dots;
var maxheight = 0;
var timedelay = 3700;

window.onload = function() {
  var x = document.getElementsByClassName("mySlides");
  var parent_elem = document.getElementById('myslideFrame')
  var widthRatio = parseInt(parent_elem.offsetWidth) / parseInt(x[0].width)

  for (i = 0; i < x.length; i++) {

    if (x[i].height > maxheight) {
      maxheight = x[i].height;
    }
  }

  document.getElementById('myslideFrame').style.height = maxheight * widthRatio + "px";
  showDivs(slideIndex);
  carousel();
};

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  dots = document.getElementsByClassName("demo");

  if (n > x.length) {
    slideIndex = 1;
  }

  if (n < 1) {
    slideIndex = x.length;
  }

  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }

  for (i = 0; i < dots.length; i++) {

    dots[i].className = dots[i].className.replace(" w3-border-red", "");

  }

  x[slideIndex - 1].style.display = "inline-block";
  dots[slideIndex - 1].className += " w3-border-red";

}

function carousel() {

  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
    dots[i].className = dots[i].className.replace(" w3-border-red", "");
  }
  slideIndex++;

  if (slideIndex > x.length) {
    slideIndex = 1
  }

  x[slideIndex - 1].style.display = "inline-block";
  dots[slideIndex - 1].className += " w3-border-red";
  t = setTimeout(carousel, timedelay);
}

function pauseCarousel() {
  clearTimeout(t)
}

function startCarousel() {
  t = setTimeout(carousel, timedelay);
}

* {
  margin: 0;
  padding: 0;
}


/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}


/* change colours to suit your needs */

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}


/* change colours to suit your needs */

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* change border colour to suit your needs */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}


/* Mein Code */

:root {
  --lightGrey: #eeeeee;
  --midGrey: #4d4d4d;
  --darkGrey: #1e1e1e;
  --Color1: #91d3f5;
  --Color2: #e24e42;
}

body {
  background-color: var(--lightGrey);
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

.wrapper {
  margin: 0 auto;
  width: 90vw;
}

a {
  outline: 0;
  text-decoration: none;
  color: var(--Color2);
}

.mainnav {
  float: left;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.mainnav ul {
  clear: left;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  left: 50%;
  text-align: center;
}

.mainnav ul li {
  display: block;
  float: right;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  right: 50%;
}

.mainnav ul li a {
  display: inline-block;
  margin: 0 0 0 1px;
  padding: 0 10px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: #333333;
  text-decoration: none;
  line-height: 40px;
}

#light {
  color: var(--lightGrey);
  font-weight: 300;
}

#logo p {
  width: 100%;
  text-align: center;
  padding-top: 20px;
  float: left;
  text-decoration: none;
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
  color: #333333;
  letter-spacing: 0.3em;
  z-index: 2;
}

.intro {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 50px;
  color: var(--darkGrey);
  float: left;
  text-align: center;
  width: 60vw;
  position: absolute;
  bottom: 2vh;
}

#introTextHello {
  padding-bottom: 20px;
  letter-spacing: 0;
  font-size: 145px;
  animation: fadein 2s;
  -moz-animation: fadein 2s;
  /* Firefox */
  -webkit-animation: fadein 2s;
  /* Safari and Chrome */
  -o-animation: fadein 2s;
  /* Opera */
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-moz-keyframes fadein {
  /* Firefox */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadein {
  /* Safari and Chrome */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-o-keyframes fadein {
  /* Opera */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#introText {
  display: none;
}

header {
  height: 100vh;
  background-image: url(img/PortraitMobile2.jpg);
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/* Ab hier beginnt der Introtext (ohne introTextHello) der Mobile-Version */

.mobileIntroSection {
  scroll-snap-align: start;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-color: var(--Color2);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.29), 0 6px 20px 0 rgba(0, 0, 0, 0.29);
}

#introTextMobile h1 {
  text-align: left;
  padding-top: 20px;
  line-height: 1.3;
  letter-spacing: 0;
}


/* Ab hier beginnt der Projektteil */

.premiumFeaturedProjectSection {
  display: none;
}

.featuredProjectsSection {
  scroll-snap-align: start;
  background-size: cover;
  background-position: center;
}


/*Das ist die Flexbox für die Projekte*/

.projects {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*Nächste Zeile sorgt für Umbruch von horizonaler Anordnung zu vertikaler bei Verkleinerung des Wrappers*/
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.featuredProjectPicture {
  position: relative;
  width: 75vw;
  height: 25vh;
  background-color: black;
  overflow: hidden;
  margin: 1.5vh;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.29), 0 6px 20px 0 rgba(0, 0, 0, 0.29);
}

.bgimage {
  display: block;
  width: 100%;
  height: auto;
  /*
	mix-blend-mode: screen;
	-webkit-filter: grayscale(10%) contrast(200%);
  	filter: grayscale(30%) contrast(90%);
  	*/
}

.projectTitleSubtitle {
  width: 80%;
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.projectTitleSubtitle hr {
  border-style: none;
  margin: 15px auto 30px auto;
  width: 50%;
  height: 3px;
  background-color: var(--Color1);
}

.projectTitleSubtitle span {
  font-family: 'Roboto', sans-serif;
  font-size: 25px;
  font-weight: 200;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0.7;
  background-color: var(--darkGrey);
}

.callToActionSection {
  scroll-snap-align: end;
  background-color: var(--Color1);
  text-align: center;
  scroll-snap-align: end;
  padding: 50px 0 50px 0;
}

.callToActionSection h2 {
  line-height: 1.3;
}


/* Ab hier beginnt der footer */

footer {
  padding-top: 30px;
  height: 250px;
  background-color: var(--darkGrey);
  scroll-snap-align: end;
}

#footerImpressum p {
  float: left;
  text-align: left;
  margin-top: 23px;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
  color: var(--midGrey);
  letter-spacing: 0.03em;
  line-height: 1.34;
}


/* footernav */

#footernav {
  margin-top: 13px;
  float: right;
}

#footernav ul {}

#footernav ul li {
  text-align: right;
  list-style: none;
}

#footernav ul li a {
  display: inline-block;
  margin: 0 0 0 1px;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.3em;
  color: var(--midGrey);
  text-decoration: none;
  line-height: 40px;
}


/* Einzelne Projektseiten */

#fluchtHeader {
  background-image: url(img/flucht/fluchtHeader.jpg);
}

#smartLogisticsHeader {
  background-image: url(img/smartLogistics/BGSmartLogisticsBig.png);
}

#blankHeader {
  background-image: none;
}

#einblickAusblickHeader {
  background-image: url(img/einblickAusblick/einblickAusblickHeader.jpg);
}

.projectPicture {
  display: block;
  float: left;
  width: 95%;
}

.wrapperSingleProject {
  padding: 50px 0 50px 5px;
  width: 90vw;
  /* wie .imgTextSized */
  margin: auto;
}

.imgTextSized {
  width: 90vw;
  padding: 0;
  margin: 25px 0;
}

.imgTotalWidthSized {
  width: 100vw;
  padding: 0;
  margin: 0;
}

.projectIntro {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 25px;
}

#visibleDesktop {
  display: none;
}

#visibleMobile {
  display: block;
}


/* 404-Seite */

.errorPage {
  text-align: center;
}

.button {
  background-color: var(--Color2);
  border: none;
  color: var(--lightGrey);
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}

.button:hover {
  background-color: var(--darkGrey);
  color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

h1 {
  text-decoration: none;
  text-align: center;
  font-size: 50px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1;
  color: var(--lightGrey);
  padding: 50px 0 10px 0;
}

h2 {
  text-decoration: none;
  text-align: center;
  font-size: 25px;
  font-family: 'Roboto', sans-serif;
  font-weight: 200;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--lightGrey);
}

h3 {
  text-decoration: none;
  text-align: center;
  font-size: 17px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.3;
  color: #ccc;
  margin-top: 20px;
}

p {
  text-decoration: none;
  text-align: left;
  font-size: 17px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.45;
  color: var(--darkGrey);
}

.darkGreyText {
  color: var(--darkGrey);
}

.Color2Text {
  color: var(--Color2);
}


/* Slideshow */

.slideshow {
  margin: 0 auto 0 auto;
  display: inline-block;
}

.mySlides {
  width: 100%;
  vertical-align: middle;
}

#myslideFrame {
  text-align: center;
  position: relative;
}


/* Is this still necessary? */

#myslideFrame:before,
.flexbox>div:before {
  content: "";
  height: 100%;
  vertical-align: middle;
  width: 0;
}

.slideshowIndicators {
  width: 100%;
  text-align: center;
}

.slideshowIndexIndicator:hover {
  background-color: var(--Color1);
}

.slideshowIndexIndicator {
  cursor: pointer;
  height: 4px;
  line-height: 1000px;
  width: 60px;
  background-color: var(--midGrey);
  display: inline-block;
  text-align: center;
  margin: 0 15px;
  transition: background-color 0.4s ease;
}

.w3-border-red,
.w3-hover-border-red:hover {
  background-color: var(--Color2)!important
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.8s;
  animation-name: fade;
  animation-duration: 1.8s;
  animation-timing-function: cubic-bezier(.5, .3, .5, 1);
}

@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}


/* Slideshow End */


/* Responsive-Einstellungen für Desktop*/

@media only screen and (min-width: 768px) {
  body {
    scroll-snap-type: y proximity;
  }
  .wrapper {
    width: 95vw;
  }
  /* nav underline-on-hover-animation */
  .link {
    position: relative;
  }
  .link:after {
    content: '';
    width: 0;
    height: 3px;
    display: block;
    margin-top: -7px;
    right: 0;
    background-color: #fff;
    transition: width .3s ease;
    -webkit-transition: width .3s ease;
  }
  .link:hover:after {
    width: 100%;
    left: 0;
    background-color: #fff;
  }
  /* nav underline-on-hover-animation ende */
  #logo p {
    text-align: left;
  }
  .intro {
    line-height: 1.2;
    float: right;
    text-align: left;
    padding-top: 40vh;
    padding-left: 25vw;
    position: relative;
  }
  #introText {
    display: block;
    letter-spacing: 0;
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    /* Firefox */
    -webkit-animation: fadein 2s;
    /* Safari and Chrome */
    -o-animation: fadein 2s;
    /* Opera */
  }
  #introTextHello {
    font-size: 50px;
  }
  .mobileIntroSection {
    display: none;
  }
  header {
    background-image: url(img/Portrait2.jpg);
  }
  /* Ab hier beginnt der Projektteil */
  .featuredProjectsSection {
    scroll-snap-align: end;
    padding: 100px 0 100px 0;
  }
  /*Das ist die Flexbox für die Projekte*/
  .projects {
    flex-direction: row;
    /*Nächste Zeile sorgt für Umbruch von horizonaler Anordnung zu vertikaler bei Verkleinerung des Wrappers*/
    border: 4px solid var(--Color2);
    width: 85vw;
    /* Wenn dieser Wert verändert, auch .premiumFeaturedProjectSection ändern */
    margin: 0 auto;
    text-align: center;
    padding: 25px 0;
  }
  /*  */
  .featuredProjectPicture {
    float: left;
    width: 20vw;
    height: 20vw;
    margin: 25px;
  }
  .projectTitleSubtitle {
    top: 45%;
    font-family: 'Roboto', sans-serif;
  }
  .projectTitleSubtitle hr {
    margin: 20px auto 45px auto;
    width: 30%;
  }
  .projectTitleSubtitle span {
    font-size: 30px;
  }
  .overlay {
    transition: .5s ease;
  }
  .featuredProjectPicture:hover .overlay {
    opacity: 0.1;
  }
  .premiumFeaturedProjectSection {
    width: calc(~"60vw + 150px");
    display: inline-block;
  }
  .premiumProjectIntro {
    width: 25vw;
    float: left;
    text-align: center;
    margin: 25px 25px 25px 0;
    padding: 25px 0 0 25px;
  }
  .premiumProjectIntro input {
    display: inline-block;
    margin-top: 25px;
  }
  #premiumFeaturedProjectPicture {
    float: right;
    width: 35vw;
    height: 40vw;
    margin: 25px 0 25px 50px;
  }
  /**/
  .callToActionSection {
    padding: 50px 0 90px 0;
  }
  .callToActionSection h2 {
    margin: 25px 0;
  }
  /* Ab hier beginnt der footer */
  footer {
    height: 270px;
  }
  #footerImpressum p {
    line-height: 1.25;
  }
  #logo {
    margin-top: 7px;
    width: 50%;
    float: left;
    text-align: left;
    text-decoration: none;
    font-size: 23px;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.3em;
  }
  .mainnav {
    float: right;
    width: 350px;
  }
  .mainnav ul {
    clear: right;
    float: right;
    left: 40%;
  }
  .mainnav ul li {
    line-height: 85px;
  }
  .wrapperSingleProject {
    padding: 80px 0 80px 0;
    width: 750px;
    /* wie .imgTextSized */
  }
  .imgTextSized {
    width: 750px;
  }
  #visibleDesktop {
    display: block;
  }
  #visibleMobile {
    display: none;
  }
  h1 {
    text-decoration: none;
    text-align: center;
    font-size: 50px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1;
  }
  h2 {
    text-decoration: none;
    text-align: center;
    font-size: 30px;
    font-family: 'Roboto', sans-serif;
    font-weight: 200;
    letter-spacing: 0.1em;
    line-height: 1;
  }
  h3 {
    text-decoration: none;
    text-align: center;
    font-size: 17px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.3;
  }
  p {
    text-decoration: none;
    text-align: left;
    font-size: 17px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.45;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">

  <script type="text/javascript" src="script.js"></script>
  <link rel="shortcut icon" type="image/png" href="img/favicon.png">
  <link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css" />
  <title>John Smith Design</title>
</head>

<body>
  <nav>
    <div class="wrapper">
      <div id="logo">
        <p>JOHN SMITH</p>
      </div>

      <div class="mainnav">
        <ul>
          <li>
            <a class="link" id="light" href="#">ABOU<span style="letter-spacing:0px;">T</span></a>
          </li>
          <li>
            <a class="link" id="light" href="#">PROJECT<span style="letter-spacing:0px;">S</span></a>
          </li>
          <li>
            <a class="link" id="light" href="#">HOM<span style="letter-spacing:0px;">E</span></a>
          </li>
        </ul>
      </div>


    </div>
  </nav>


  <header id="fluchtHeader">
    <div class="overlay"></div>
    <div class="projectTitleSubtitle">
      <h1>FACT</h1>
      <br>
      <hr>
      <h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</h2>
      <h3>with Johnny Jones.</h3>
    </div>
  </header>

  <div class="wrapper">
    <div class="wrapperSingleProject">
      <p class="projectIntro">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur
        sadipscing elitr.</p>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur
        sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
        et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
    </div>



    <div class="slideshow">
      <div id="myslideFrame">
        <img class="mySlides fade" src="https://i.sstatic.net/W0mZQ.jpg">
        <img class="mySlides fade" src="https://i.sstatic.net/9djAf.jpg">
        <img class="mySlides fade" src="https://i.sstatic.net/LhWX8.jpg">



        <div class="slideshowIndicators">
          <span onclick="currentDiv(1)" class="slideshowIndexIndicator demo" onmouseover="pauseCarousel();" onmouseout="startCarousel()"></span>

          <span onclick="currentDiv(2)" class="slideshowIndexIndicator demo" onmouseover="pauseCarousel();" onmouseout="startCarousel()"></span>

          <span onclick="currentDiv(3)" class="slideshowIndexIndicator demo" onmouseover="pauseCarousel();" onmouseout="	startCarousel()"></span>
        </div>
      </div>
    </div>

  </div>



  <div class="callToActionSection">
    <div class="wrapper">
      <h2>Want to see more? <br> Check out my other projects!</h2>
      <br>
      <input type="submit" class='button' value="Let's go" onclick="location.href='#'">
    </div>
  </div>


  <footer>
    <div class="wrapper">
      <div id="footerImpressum">
        <p>
          Contact:<br>
          <br> John Smith <br> Johnstreet 30<br> 11111 Johntown<br>
          <br> john@smith.com
          <br> +11 (1)111 111 11 11
        </p>
      </div>
      <div id="footernav">
        <ul>
          <li><a class="link" href="#">HOM<span style="letter-spacing:0px;">E</span></a></li>
          <li><a class="link" href="#">PROJECT<span style="letter-spacing:0px;">S</span></a></li>
          <li><a class="link" href="#">ABOU<span style="letter-spacing:0px;">T</span></a></li>
          <li><a class="link" href="#">IMPRIN<span style="letter-spacing:0px;">T</span></a></li>
          <li><a class="link" href="#">PRIVAC<span style="letter-spacing:0px;">Y</span></a></li>
        </ul>
      </div>
    </div>
  </footer>
</body>

</html>

Answer 1

Ok, so the fix is pretty simple. You don't want anything messing around with the height of this element. So just remove everything from the window.load that does this. Which should leave you with something like this:

window.onload = function() {
    showDivs(slideIndex);
    carousel();
};

Next up is to fix the horizontal alignment of the carousel on desktop, this is by far the easiest thing to do. Your slideshow is an inline-block which means it can be centered by giving the parent the text-align: center style.

.wrapper {
    margin: 0 auto;
    width: 90vw;
    text-align: center;
}