Есть ли способ изменить размеры моих изображений с гиперссылками, чтобы они соответствовали центральному расположению в зависимости от того, открыт ли SideNav?

Question

<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="about.html">about</a>
<a href="work.html">work</a>
<a class="active" href="contact.html">contact</a>
<a style="position: absolute;bottom: 10%;left:55px;font-size: 13px;" href="https://www.steamcommunity.com/id/issajord" target="_blank">made by j; 
</a>
</div>

<div id="main">
<span style="font-size:30px;cursor:pointer;padding-left: 13px;" onclick="openNav()">☰</span>
<h1>want to get in touch?</h1>
<div class="icons">
<a href="https://discord.gg/wRcjHfx" class="discord-icon">
<img src="images/discord.png" alt="discord" width="100px" height="100px">
</a>
<a style="padding-left: 15px;" href="https://steamcommunity.com/id/issajord" class="steam-icon">
<img src="images/steam.png" alt="steam" width="100px" height="100px">
</a>
<a style="padding-left: 15px;" href="mailto:jordanh@linuxmail.org" class="email-icon">
<img src="images/email.png" alt="email" width="100px" height="100px">
</a>
<a style="padding-left: 15px;" href="https://www.youtube.com/channel/UCZefHc7AaQqw7gv0p7uDw9Q" class="youtube-icon">
<img src="images/youtube.png" alt="youtube" width="100px" height="100px">
</a>
</div>
</div>

<style>
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #222;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}

.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
font-family: "Quicksand";
}

.sidenav p {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 16px;
color: #818181;
display: block;
transition: 0.5s;
font-family: "Quicksand";
}

.sidenav a:hover {
color: #fff;
}

.sidenav .active {
color: #668cff;
}

.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}

#main {
transition: margin-left .5s;
padding: 8px;
padding-top: 5px;
font-family: "Quicksand";
color: #fff;
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

.credit {
padding: 100% 8px 8px 32px;
color: #fff;
font-family: 'Quicksand';
font-size: 12px;
display: block;
transition: 0.5s;
}

/* content */
#main h1 {
text-align: center;
font-family: 'Quicksand';
font-size: 40px;
padding-top: 15%;
color: #668cff;
}

.icons {
margin-left: 36%;
}
</style>

Мое намерение состояло в том, чтобы изображения были в центре, начиная с того места, где начинается sidenav, и заканчивая шириной страницы. Тем не менее, изображения смещены, когда sidenav открыт. В моем текущем разрешении (1366x768) все изображения работают, имеют гиперссылки и центрируются при закрытии sidenav.