Question

这是在jsbin中。但是我也可以根据需要上传文件。由于缺少图像和其他文件，一切都不合适。但我唯一的问题是导航栏的右侧。 “关于我们，博客，安全，帮助，立即下载”都被推到了屏幕的边缘，而Logoicon和“Outbank”正在他们应该的中心容器内。

右侧的导航栏链接应该与左侧的2个完全相同，只是在右侧而不是左侧。

我正在学习HTML和CSS，所以我只是查找网站并试图从头开始重新制作它们。这是我能想到的唯一方法，因为我没有人教我。所有的Udemy课程和唯一的文本课程都缺少了我的大脑。有人能告诉我为什么会这样吗？

您可能需要将HTML / CSS面板一直拖到页面左侧以查看我所引用的内容。导航栏应该就像在此堆栈溢出页面上一样。 StackIcon，“stackoverflow”然后链接到右边。页面的所有停留中心与容器的宽度。 http://jsbin.com/nodifoxama/edit?html,css,output

Answer 1

.nav {
    background-color: #fff;
    padding: 20px 0;
    position: fixed;
    z-index: 5;
    width: 100%;
    box-sizing: border-box;
    //add
    left: 0;
    top: 0;
}

Answer 2

您的网格设计无法正常工作，因为当浏览器屏幕缩小时，您的CSS无法处理。

如果您不熟悉CSS和HTML，我强烈建议您在网页中实现CSS Bootstrap，而不是编写自定义CSS响应页面。您可以从关于Bootstrap的W3Schools教程开始，以便更好地理解响应式设计：

http://www.w3schools.com/bootstrap/

无法弄清楚为什么我的导航栏被推向右边

2 个答案: