Image doesn't stay in the center when resizing windows

Question

I am trying to keep my banner+navbar in the center, but whenever I resize the window, the right side collapses while the left doesn't move. This results in the image+banner to be on the right side of the screen, while there is still a margin on the left. How am I able to collapse both margins equally when I resize the window so that the image+banner are able to stay in the center.

Below is my code

index

<div class="box">
  <?php include("navigation.html");?>
</div>

Nav

div.box {
  position: relative;
  margin: 0;
  padding: 0;
  height: auto;
  width: 52%;
  left: 25%;
  min-width: 999px;
  background-color: #555555;
  z-index: -1;
}

body,
html {
  margin: 0px;
  padding: 0px;
}

ul.parent {
  margin: 0;
  padding: 0;
  border: 0;
  list-style-type: none;
}

div.image1 {
  float: left;
  height: auto;
}

img.imageHome {
  width: 100%;
  height: auto;
  position: relative;
}

div.navi {
  list-style-type: none;
  position: absolute;
  display: flex;
  float: left;
}

<body>
  <ul class="parent">
    <li>
      <div><img src="Images/banner2.png" class="image1"></div>
    </li>
    <li>
      <div class="navi">
        <a href="Home.php"><img src="Images/home.png" onMouseOver="this.src='Images/home2.png'" onMouseOut="this.src='Images/home.png'" class="imageHome"></a>
        <div class="dropdown">
          <img src="Images/webtoons.png" onMouseOver="this.src='Images/webtoons2.png'" onMouseOut="this.src='Images/webtoons.png'" class="imageHome">
          <div class="dropdown-content">
            <a href="yaoi.php"><img src="Images/yaoibl.png" onMouseOver="this.src='Images/yaoibl2.png'" onMouseOut="this.src='Images/yaoibl.png'" class="imageHome"></a>
            <a href="fanfic.php"><img src="Images/nonbl.png" onMouseOver="this.src='Images/nonbl2.png'" onMouseOut="this.src='Images/nonbl.png'" class="imageHome"></a>
          </div>
        </div>
        <div class="dropdown">
          <img src="Images/media.png" onMouseOver="this.src='Images/media2.png'" onMouseOut="this.src='Images/media.png'" class="imageHome">
          <div class="dropdown-content">
            <a href="blcd.php"><img src="Images/blcd.png" onMouseOver="this.src='Images/blcd2.png'" onMouseOut="this.src='Images/blcd.png'" class="imageHome"></a>
            <a href="Yaoi.php"><img src="Images/pictures.png" onMouseOver="this.src='Images/pictures2.png'" onMouseOut="this.src='Images/pictures.png'" class="imageHome"></a>
            <a href="Yaoi.php"><img src="Images/videos.png" onMouseOver="this.src='Images/videos2.png'" onMouseOut="this.src='Images/videos.png'" class="imageHome"></a>
          </div>
        </div>
        <div class="dropdown">
          <img src="Images/scanlation.png" onMouseOver="this.src='Images/scanlation2.png'" onMouseOut="this.src='Images/scanlation.png'" class="imageHome">
          <div class="dropdown-content">
            <a href="yaoi.php"><img src="Images/scanlationteam.png" onMouseOver="this.src='Images/scanlationteam2.png'" onMouseOut="this.src='Images/scanlationteam.png'" class="imageHome"></a>
            <a href="fanfic.php"><img src="Images/cbaw.png" onMouseOver="this.src='Images/cbaw2.png'" onMouseOut="this.src='Images/cbaw.png'" class="imageHome"></a>
          </div>
        </div>
        <a href="contact.php"><img src="Images/aboutus.png" onMouseOver="this.src='Images/aboutus2.png'" onMouseOut="this.src='Images/aboutus.png'" class="imageHome"></a>
      </div>
    </li>
  </ul>
</body>

edit: jsfiddle: https://jsfiddle.net/ppccLf4g/

https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div — Temani Afif, Jan 03 '18 at 10:17
https://stackoverflow.com/questions/1776915/how-to-center-absolutely-positioned-element-in-div — Temani Afif, Jan 03 '18 at 10:17
https://stackoverflow.com/questions/7055393/center-image-using-text-align-center — Temani Afif, Jan 03 '18 at 10:17
https://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css — Temani Afif, Jan 03 '18 at 10:18
https://stackoverflow.com/questions/5703552/css-center-text-horizontally-and-vertically-inside-a-div-block — Temani Afif, Jan 03 '18 at 10:18
you can try https://jsfiddle.net/ppccLf4g/1/ `use margin:0px auto;` — lalit bhakuni, Jan 03 '18 at 10:26

Image doesn't stay in the center when resizing windows

0 Answers0