HTML & CSS ヘッダーが上手く表示されません

現在ProgateのHTML＆CSS道場コース（中級編）に取り組んでいます。
画像下の見本のようにヘッダー（Progate、ログインの部分）を表示させたいのですが、プレビューのようにはみ出してしまいます。

###何がしたいか
画像下の見本のようにヘッダー（Progate,ログインの部分）を表示させたい。

###不明点
正確にコードを入力しているのに画像上のプレビューのようにはみ出してしまうため、解決策を知りたい。

試したこと

HTMLは以下のように記入しました。

コード  <header>
    <div class="container">
      <div class="header-left">
        <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
      </div>
    </div>
  </header>
    <div class="top-wrapper">
      <div class="container">
      <h1>LEARN TO CODE.</h1>
      <h1>LEARN TO BE CREATIVE.</h1>
      <p>Progateはオンラインプログラミング学習サービスです。</p>
      <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
    
    <div class="btn wrapper">
      <a class="btn signup" href = "#">新規登録はこちら</a>
      <p>or</p>
      <a class="btn facebook" href="#">Facebookで登録</a>
      <a class="btn twitter" href="#">Twitterで登録</a>
    </div>
    </div>
   </div>  
    <div class="lesson-wrapper"></div>
    
    <div class="message-wrapper"></div>
  
  <footer></footer>
</body>


```

CSSは以下のように記入しました。
```ここに言語を入力
コード.container {
  width: 1170px;
  margin:0 auto;
  
}

.top-wrapper{
  background-image:url(https://prog-8.com/images/html/advanced/top.png);
  background-size:cover;
  text-align:center;
  padding:180px 0px 100px 0px;
  color:white;
}

.top-wrapper h1{
  font-size:45px;
  opacity:0.7;
  font-weight:boid;
  letter-spacing:5px;
}

.top-wrapper p{
  opacity:0.7;
}

.btn{
  display:inline-block;
  padding:8px 24px;
  color:white;
  border-radius:4px;
}

.btn:hover{
  opacity:1;
}

.signup{
  background-color:#239b76;
  opacity:0.8;
  margin-top:30px;
 
}

.btn p{
  margin-top:15px;
  margin-bottom:15px;
}  

.facebook{
  background-color:#3b5998;
  opacity:0.8;
  margin-right:10px;
}

.twitter{
  background-color:#55acee;
  opacity:0.8;
}

heaer{
  height:65px;
}
.logo{
  margin:20px;
  width:124px;
}
```
### 補足情報（FW/ツールのバージョンなど）

スライドを検索したり、答えと照らし合わせたのですが、解決策が見つからずお分かりになる方いらっしゃいましたらご教示頂けますと嬉しいです。