Я не могу поместить элементы списка (nav) в заголовок

Question

Я не мог сделать элементы списка, которые (навигация) внутри фона моего заголовка, они двигались вниз по заголовку, когда я стилизировал их в CSS.

Вот мой код:

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

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

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 ul {
  padding: 0;
  margin: 0;
}

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

<header>
  <div class="container">
    <div id="branding">
      <h1>my company</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>

Answer 1

Вы допустили ошибку в своем CSS: он работает с правильным написанием: overflow: hidden

Answer 2

Используйте этот код, это поможет вам.Я добавил этот CSS:

nav {
  display: inline-block;
  width: 100%;
}

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

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

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 ul {
  padding: 0;
  margin: 0;
}

header li {
  float: left;
  display: inline;
  padding: 0 20px 0 20px;
}
nav {
  display: inline-block;
  width: 100%;
}

  <header>
    <div class="container">
      <div id="branding">
        <h1>my company</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>