Slightly off center using flexbox

Question

I have a navigation bar which has 5 links on it (including the title) and I have an image below it. The navigation bar and image below are completely separate and are both centered using flexbox. The issue I am having is that the image appears to be slightly off center (although it could possibly be the navigation bar is slightly off center) and I can;t figure out why?

Here is the Image view html:

 <div class="image-container">
        <img class="image-full-view" [ngStyle]="{'height': selectedImage.heightSize , 'width': selectedImage.widthSize}" [src]="selectedImage.imagePath" alt="Man Praying">
    </div>

The image view CSS:

.image-full-view {
    padding: 0px;
    margin-top: 0px;
    -webkit-transform: scale(1.5); 
     -moz-transform: scale(1.5); 
      -ms-transform: scale(1.5); 
       -o-transform: scale(1.5); 
          transform: scale(1.5);
            filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');   
}

.image-container {
    display: flex;
    align-items: center;
    justify-content: center; 
    height: 90vh;
    margin-top: 15px; 
}

.image-name-container {
    position: relative;
    text-align: center;
    top: 85px;
}

This is the nav bar html:

<header>
    <nav>
        <ul class="nav-links">
            <li><a routerLink="gallery-list" class="twoSec">Gallery</a></li>
            <li><a routerLink="albums" class="oneSec">Albums</a></li>
            <li><a routerLink="gallery-list" class="navbar-title">BAILEY PHOTOGRAPHY</a></li>
            <li><a routerLink="favourites" class="oneSec">Favourites</a></li>
            <li><a routerLink="cart" class="twoSec">Cart</a></li>
        </ul>
    </nav>
</header>

The nav bar CSS:

* {
  margin: 0px;
  padding: 0px;
  padding-bottom: 30px;
  font-size: 22px;
  color: black;
  font-family: 'Lato', sans-serif;

}

.navbar-title {
    font-size: 140%;
    text-decoration: none !important;
    display: flex;
    justify-content: center;
    border: black solid 2px;
    width: 405px;
    margin-top: 25px;
    color: black;
    font-weight: 500;
    transition: transform 0.2s, background-color 0.5s, color 0.5s;
}

.navbar-title:hover {
    background-color: black;
    color: white;
    transform: scale(1.1);
}

.nav-links {
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    padding-bottom: 30px;


}

.nav-links a {
    float: left;
    display: block;
    text-align: center;
    padding: 14px 16px;

}


nav {
  overflow: hidden;
  background-color: white;
  position: fixed; 
  top: 0; 
  width: 100%; 
}