Как центрировать логотип на панели навигации, когда на панели навигации есть еще один элемент?

На моей панели навигации есть логотип, который должен быть по центру, и изображение кнопки меню (3 строки), которое должно быть плавающим влево. Я заставил кнопку меню плавать влево, но просто не могу заставить логотип находиться точно в центре панели навигации, он всегда немного правее.

Я пробовал помещать их в div и устанавливать ширину div на 50%, а затем перемещать изображение влево, чтобы оно центрировалось, но не повезло.

HTML:

<div id="resp-navbar">
    <div id="resp-nav-contents">
        <img id="exp-menu-img" src="3lines.png">
        <img id="resp-logo" src="MSLOGO.jpg">
    </div>
</div>

CSS:

#resp-navbar{
    height: 15%;
    text-align: center;
    width: 100%;
    display: inline-block;
    position: fixed;
    z-index:51;
    background-color: white;
    border-bottom: solid;
    border-width: 1px;
    border-color: #afafaf;

}   

#resp-nav-contents{
    min-width: 300px;
}

#exp-menu-img{
    height: 30%;
    position: absolute;
    left: 2%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.4;
    cursor: pointer;
}

#resp-logo{
    height: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline;
 }