Div无法正确对齐

Question

让我们快速浏览浏览器宽度小于800px的http://tadbirnc.ir/，你会发现徽标不适合正确的位置，如果你检查容器div，你可以看到一切都是正确的（我认为）我不知道为什么徽标的右侧有间隙。 我必须通过覆盖一些css规则来使用jQuery来纠正这个问题。

这是这部分的HTML代码：

<div class="header-mobile"></div>
<div class="container header-items">
  <div style="max-width: 200px;" class="col-xs-12 col-sm-4 col-md-4 col-lg-3">
    <div class="logo">
      <a href="/">
        <img src="/skin/default/images/theme/logo.png" id="img-logo" alt="logo">
      </a>
    </div>
  </div>
  <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 page-rev-align page-rev-float">Blah Blah Blah</div>
</div>

问题是带有class =“col-xs-12 col-sm-4 col-md-4 col-lg-3”的div不对齐。

任何帮助将不胜感激。

Answer 1

问题在于元素上的硬集max-width:200px;。您将需要使用CSS媒体查询来定位元素，并为较小的屏幕尺寸设置正确的宽度。

祝你好运！

Answer 2

请尝试这个：

.logo
{
    float:right;
}

DEMO

Answer 3

请添加class="col-xs-12 col-sm-4 col-md-4 col-lg-3"

添加此css

 max-width: 200px;
    float: right;
    position: fixed;