为什么我的无序列表出现在标题之外？

Question

As far as I can tell my CSS is fine, but it just keeps appearing below the header. Any ideas? Sorry for the newb question.

body {
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  background-color: #f4f4f4;
}


/* Global */

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

ul {
  margin: 0;
  padding: 0;
}


/* Header **/

header {
  background: #35424a;
  color: #ffffff;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: #e8491d 3px solid;
}

header a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

header li {
  float: left;
  display: inline;
  padding: 0 20px 0 20px;
}

header #branding {
  float: left;
}

header #branding h1 {
  margin: 0;
}

header nav {
  float: right;
  margin-top: 10px;
}

header .highlight, header .current a {
  color: #e8491d;
  font-weight: bold;
}

<header>
  <div class "container">
    <div id "branding">
      <h1><span>Acme</span> Web Design</h1>
    </div>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
      </ul>
    </nav>
  </div>
</header>

我在HTML或CSS中出错了，还是两者兼而有之？我只是不能为我的生活弄清楚为什么它不会在标题中出现，而这实际上让我发疯了。

Answer 1

这是因为您的标头h1元素为display:block，它将占用其父级的全部宽度，尝试将其添加到您的css代码中：

header h1
{
    display:inline-block;
    float:left
}