Need slideshow to be centered and to fix the buttons

I need help making the slideshow center in the page and making the buttons be on the images on the left and right, instead of to the right of the slideshow. If there are any other code issues that you see just let me know. It would also be helpful if the buttons were bigger. Of course if they were working properly they may be larger anyway. This website wants me to keep typing and adding more and more so it isn't just code.

var slideIndex = 1;
showDivs(slideIndex);

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

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "flex";
}
body {
  margin: 0;
  padding: 0;
  font-family: 'arial', serif;
}

.nav {
  background-color: gray;
  color: #ffffff list-style: none;
  text-align: center;
  padding: 20px 0 20px 0;
  font-family: arial;
}

.nav>li {
  display: inline-block;
  padding-right: 50px;
  font-size: 16px;
  font-family: arial;
}

.nav>li>a {
  text-decoration: none;
  color: #ffffff
}

.nav>li>a:hover {
  color: #1a1b1bff;
}

.banner {
  width: 100%;
  display: block;
  background-color: #0000cbff;
  font-family: "serif";
  text-align: center;
  color: #ffffff;
  height: 18%;
  font-size: 90px;
  padding-top: 22px;
}

.ad {
  width: auto;
  height: auto;
  margin-top: 10px;
  display: block;
  justify-content: center;
  align-content: center;
  display: flex;
  align-items: center;
}

.ad2 {
  display: block;
  width: auto;
  height: 100%;
  float: right;
  margin-right: 10px;
  margin-bottom: 10px;
}

ul.nav {
  margin: 0;
}

body {
  width: 100%;
  float: left;
}

body {
  max-width: 100%;
  margin: 0 auto
}

p2 {
  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.links {
  font-family: "imperial";
  font-size: 30px;
  text-decoration: none;
  color: #000;
  height: 50px;
  width: inherit;
  float: left;
  margin-top: 25%;
  list-style-type: none;
  text-align: center;
  margin-left: 10px;
  margin-bottom: auto;
}

.slideshow {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: inherit;
  margin-top: 5%;
  margin-bottom: 5%;
}

.slideshowbuttonleft {
  color: black;
  float: left;
  width: auto
}

.slideshowbuttonright {
  color: black;
  float: right;
  width: auto;
}

.columns {
  align-content: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
}
<!DOCTYPE>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="">
  <link rel="stylesheet" type="text/css" href="mobilepage.css" media="screen and (max-width: 900px)">
</head>

<body>
  <div class="header">
    <div class="banner">

      <banner>
        Business
      </banner>
    </div>



    <ul class="nav">
      <li><a href="Home.html">Home</a></li>
      <li><a href="Aboutus.html">About</a></li>
      <li><a href="Menu.html">Menu</a></li>
      <li><a href="Merchandise.html">Merchandise</a></li>
      <li><a href="events.html">Events</a></li>
      <li><a href="contactus.html">Contact Us</a></li>
    </ul>

    <div class="ad">
      <a href="www.website.com"> <img src="Ad.gif" width: "100" height="100" class="ad"></a>
    </div>

    <p2>
      <a href="https://www.website.com/"> <img src="logo.png" width: "100" height="100" class="ad"></a>
    </p2>

    <div class="links">
      <li><a class="links" href="events.html">About</a></li>
      <li><a class="links" href="events.html">Gallery</a></li>
      <li><a class="links" href="events.html">Inter</a></li>
    </div>
  </div>

  <div id="footer">
    <div class="social-popout">
      <div class="columns">

        <a class="social_me" href="https://www.instagram.com" target="_blank"><img src="instagramlogo.jpg" width: "100" height="100" alt="instagram" /></a>

        <a class="social_me" href="https://www.facebook.com" target="_blank"><img src="facebooklogo.jpg" width: "75" height="75" alt="Fb" /></a>

        <a class="social_me" href="https://yelp.com" "_blank"><img src="yelp.png" width: "100" height="100" alt="Ylp" /></a>
      </div>

      <div class="ad2">
        <a href="www.website.com"> <img src="Ad.gif" class="ad2"></a>
      </div>

      <div>
        <div class="slideshow">
          <img class="mySlides" src="image1.jpg" style="width:50%">
          <img class="mySlides" src="image2.jpg" style="width:50%">
          <img class="mySlides" src="image3.jpg" style="width:50%">


          <button class="slideshowbuttonleft" onclick="plusDivs(-1)">&#10094;</button>
          <button class="slideshowbuttonright" onclick="plusDivs(1)">&#10095;</button>
        </div>
      </div>
    </div>
  </div>

</body>

</html>



Read more here: https://stackoverflow.com/questions/68456977/need-slideshow-to-be-centered-and-to-fix-the-buttons

Content Attribution

This content was originally published by Kat at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: