Unordered List Off Center

by nathan hartmann

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title>Project Tester</title>
    <script type="text/javascript" src="js/script.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <meta charset="utf-8">
    <title>Home</title>

  </head>
  <body>
    <!-- *** Navigation Bar Start *** -->
    <div class="navBar" id="bNavBar">
      <ul>
        <a href="Index.html"><li>Home</li></a>
        <a href="aboutMe.html"><li>About Me</li></a>
        <a href="workHistory.html"><li>Work History </li></a>
        <a href="contact.html"><li>Contact Me</li></a>
      </ul>
    </div>
    <!-- *** Maint Content Start *** -->
    <div class="content">
        Home<br  />
        <ul class="mainImageUl">
          <li><img class="mainImage" src="https://vignette.wikia.nocookie.net/dragonballfanon/images/7/70/Random.png/revision/latest?cb=20161221030547" alt=""><br>
          Ipsum Lorum</li>
          <li><img class="mainImage" src="https://vignette.wikia.nocookie.net/dragonballfanon/images/7/70/Random.png/revision/latest?cb=20161221030547" alt=""><br>
          Ipsum Lorum</li>
        </ul>
    </div>
  </body>
</html>

CSS

:root{
  --navBarBackground:#2C7873;
  --navBarBorder:white;
  --navBarButtonHover:#6FB98F;
  --navBarButtonActive:#021C1E;
}

html, body
{
  color:white;
  text-align:center;
  background-color:#009999;
  margin: auto;
  padding: 0;
}
.navBar{
  text-align:center;
  list-style:linear;
  margin:auto;
}
.navBar a{
  color:white;
}
.navBar ul{
  padding:0px;
  color:white;
  font-size:0px;
  background-color:var(--navBarBackground);
  list-style-type:none;
  margin:auto;
  border:1px dashed var(--navBarBorder);
}
.navBar ul li{
  transition-duration: .5s;
  border: 0px 1px solid var(--navBarBorder);
  font-size:16px;
  width:100px;
  padding: 15px 5px;
  cursor:pointer;
  display:inline-block;
  margin:auto;
  background-color:cadetblue;
}
.navBar ul li:hover{
  background-color:var(--navBarButtonHover);
}
.navBar ul li:active{
  transition-duration:0s;
  background-color:var(--navBarButtonActive);
}
.content{
  margin:auto;
  width:90%;
}
.mainImage{

  height:275px;
  width:275px;
}
.mainImageUl ul{
  list-style-type:none;
  margin:0px auto;
  padding:0px;

}
.mainImageUl li{

  padding:0px;
  display:inline-block;
  float:left;
  height:350px;
  width:100%;
}

@media screen and (min-width: 700px){
  .mainImageUl li{
    display:inline-block;
    float:left;
    height:200px;
    width:50%;
  }
}