Html 在浏览器调整大小时移动图像

很抱歉，这个问题真的很难回答，但出于某种原因，我就是不明白为什么它不起作用。基本上，我正在尝试移动标题菜单旁边的徽标。即使在浏览器重新调整大小时，徽标仍将保留在标题菜单的旁边

代码：

Html

图片：

---

谢谢你的帮助。

你在找这样的东西吗

HTML

---

在html结构中，在关闭bar nav div后放置div徽标。试试看！谢谢你，它不是完全像这样，但这一个提供了最大的帮助。

<div class="header">
    <div class="logo">
    <div class="logo-name">
        <a href="/"><img src ="/images/logo.png" alt="Company Logo" /></a>
    </div>        
    </div>
    <div class="bar nav">
    <div class="nav-outer">
    <div class="nav-wrapper">
    <div class="nav-inner"> 
    Home, Products... </div></div>etc...

.header:after {
    background-color: #1D2124;
    background-position: center center;
    background-repeat: no-repeat;
    content: " ";
    display: block;
    height: 92px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
div.logo {
    display: block;
    left: 0;
    margin-left: 110px;
    position: absolute;
    top: 5px;
}
.bar:before, .bar:after {
    background-repeat: repeat;
    bottom: 0;
    content: " ";
    position: absolute;
    top: 0;
    z-index: -1;
}
.bar:before, .bar:after {
    background-repeat: repeat;
    bottom: 0;
    content: " ";
    position: absolute;
    top: 0;
    z-index: -1;
}
.nav {
    min-height: 33px;
    top: 53px;
    width: auto;
    z-index: 100;
}
.nav-wrapper {
    left: 65px;
    margin: 0 auto;
    position: relative;
    width: 890px;
}

<div class="main">
    <div class="nav">
        <div class="sub logo"></div>
        <div class="sub">link</div>
        <div class="sub">link</div>
        <div class="sub">link</div>

    </div>
</div>

.sub{
    width:auto;
    height:20px;
    background:green;
    float:left;
    min-width:40px;
}
.logo{
    background:blue;
}
.main{
    background:red;
    height:40px;
}