Slightly off center using flexbox - css

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%;
}