wrapper やcontainer のbox で　ｍax-width で幅を指定しても、中の要素の幅を大きくするとはみ出てしまう

wrapper やcontainer のbox で　
ｍax-width で幅を指定しても、中の要素の幅を大きくするとはみ出てしまいます。

max-width で外枠の幅の要素を指定すれば、　中に大きな幅のbox幅を置いてもはみ出さないと思っていました。

はみ出すのが普通でしょうか？

はみ出さないようにする方法はあるのでしょうか。

 <header id="header">
    <div class="site-title"><a href="index.html"><img src="/img/logo.svg" alt="TOTALLY"></a></div><!-- /.site-title -->
  

<nav class="wrapper">
  <ul class="menu">
    <li><a href="#">ALL</a></li>
          <li><a href="#">NEW</a></li>
          <li><a href="#">VINTAGE</a></li>
          <li><a href="#">CATEGORY</a></li>
          <li><a href="#">LOOKBOOK</a></li>
          <li><a href="#">BLOG</a></li>
  </ul><!-- /.menu -->
    <ul class="login">
      <li><a href="#">LOGIN</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul><!-- /.login -->
  
</nav><!-- /.wrapper -->
</header><!-- /#header -->

.wrapper{
  max-width:800px;
  margin:0 auto;
}

/*-------------------------------------------
ヘッダー
-------------------------------------------*/



#header{
      max-width: 500px;
    padding: 46px 0 26px;
    background: red;
    margin: 0 auto 50px;
    border-bottom: 1px solid #c3c3c3;
    border: 3px solid black;
}

.wrapper{
     width: 900px;
    margin: 0 auto;
        background: orange;
    border: 3px solid black;
}

wrapper要素がheader の幅より小さいとき、収まる。

[リンク内容](