Bootstrap - 带图像的Navbar

Question

你好我想实现以下设计，但它必须是响应式的（我正在使用bootstrap）：

我使用了以下HTML5标记

<div class="row">
    <div class="logo visible-md visible-xs visible-sm visible-lg col-md-2  col-xs-2 col-sm-2 col-lg-2">
        <img src="/images/logo.png">
    </div>
    <div class="pull-right">
        <img src="/images/Banner.png" class="img-responsive">
    </div>
    <div style="clear: both"></div>
</div>
<br>

    <div id="nav" class="navbar" style="width:90%">
        <ul class="nav navbar-nav">
                <li><a href="#">home</a></li>
                <li><a href="#">test dp</a></li>
        </ul>
    </div>

问题在于重新调整浏览器大小（即从移动设备打开或重新调整浏览器大小），图像Banner.png更改位置并且不再与蓝色导航栏对齐<​​/ p>

编辑1： 我已经使用了绝对定位并在这里添加了代码，它工作正常但不稳定（即当我调整大小不同的浏览器时，产生图像和导航栏之间的空间不一样） https://jsfiddle.net/c45xqLe9/