为什么我的背景导航栏不改变颜色？

Question

我正在使用骨架框架，并尝试制作一个简单的中殿酒吧？

当我尝试创建导航栏div并将css导航栏ID颜色设置为蓝色时，背景将保持不变。 但是，如果我尝试更改各个列，则颜色将发生变化。 有没有一种方法可以使网格框架在顶部创建一致的导航栏，而不会告诉每列某种颜色。 这似乎很愚蠢。 导航栏是否可以延伸超过960px的框架长度？ 我希望条形背景延伸到屏幕的两侧。

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="skeleton.css">
    <link rel="stylesheet" type="text/css" href="normalize.css">
</head>
<div class="container">
    <div id="nav-bar">
        <div class="two columns">
            <h1>DS</h1>
        </div>
        <div id="nav" class="ten columns">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div><!---nav-bar--->
</div><!---container--->
</html>

CSS：

.container {
    margin-top: 50px;
}

#nav-bar {
    background-color: blue;
}

#nav {
    margin: 13px 0 0 0;
}

#nav ul li {
    display: inline;
    margin: 0 20px 0 0;
    margin-bottom: 130px;
}

#nav a {
    text-decoration: none;
    color: black
}

#nav a:hover {
    text-decoration: underline;
}

https://jsfiddle.net/gp9d7yvz/

Answer 1

CSS代码第三行出现错误：没有结束}标记。 这会导致以下CSS发生故障。 您还忘记了在结尾处加上“;” 在您的“颜色：黑色；”结尾处 属性。 如果它不起作用，也请添加小提琴。

Answer 2

第一个问题：尝试在#nav下而不是＃nav-bar下添加background-color

#nav {
margin: 13px 0 0 0;
background-color: blue;
}

第二个问题：您所有的内容都在一个宽度为960px的.container内部。 当这些div位于容器内时，它们的宽度不能为100％。 因此，您需要通过将标头移出容器来更改代码。

<div id="nav-bar"> 
      <div class="two columns">
            <h1>DS</h1>
        </div>
        <div id="nav" class="ten columns">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
</div><!---nav-bar-->


<div class="container">
</div><!---container-->

这是一个示例： https : //jsfiddle.net/gp9d7yvz/5/

使用网格960时，我还能有100％宽的标题部分吗？