在响应性html/css站点上使用左对齐徽标和右对齐导航

我正在尝试左对齐我的徽标，右对齐我的导航。我使用“”样板文件创建响应页面

当我向右浮动导航时，徽标和导航不会保持在同一条“线”上。在将其添加到这个示例之前，我从CSS中删除了float right规则

下面是我正在使用的一些CSS，我认为问题可能出在哪里，其余的都列出了

---

您缺少分别从左侧和右侧元素中删除边距的

alpha

和

omega

类

HTML应该如下所示：

<div class="header">
       <div class="two-thirds column alpha">
         <div class="logo"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQNGEBMvQ55sHEC0xWxvpkyW-H_ZylS9Fk5ktg3OLKLS3w6yCr29w" width="47" height="36"></div>
      </div>
      <div class="one-third column omega">
        <div class="nav">
          <ul><li><a href="hire.html">hire</a></li><li><a href="bio.html">Bio</a></li><li><a href="contact.html">Contact</a></li><li><a href="blog.html">blog</a></li></ul>
        </div>
      </div>

对于480px和767px之间的任何设备，还有另一个媒体查询会覆盖该查询，并给出420px的宽度

 @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }

因为使用的类，

2/3

和

1/3

现在被设置为420px或300px，它们占据了整行（它们成为堆叠/线性）

---

要覆盖这些元素并使它们位于同一行上，您需要通过附加的CSS规则将这些元素的宽度减少到100/200px或120/300px，以适应媒体查询

“每当你们遇到一篇非常草率、不费力气的帖子，或者一个答案显然是错误的，甚至可能是危险的错误时，就使用你们的反对票。”从技术上讲，这解决了实现中的一个问题“你给出了一个正确的答案，但是没有答案，你就解决不了任何问题。。。这就是我投否决票的原因。我认为这仍然超出了推荐使用否决票的范围，但嘿，投反对票的是你，所以没有什么怨恨。我最终投了赞成票，因为这是一个非常好的答案：）

 @media only screen and (max-width: 767px) {
        .container { width: 300px; }}

 @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }