ドロップダウンメニューがmax-widthの中央に配置されていないのはなぜですか？

Question

私は、幅が100％のときに最小サイズに集中し、最大幅が100％に変更されたときには反応しないドロップダウンメニューを持っています。私はその親と親の親のectを100％の最大幅に設定していますが、max-widthプロパティは想定したように動作していないようです。

私の理解から、max-widthは親との相対値ですから、親とその親の親が100％の最大幅に設定されている場合、max-widthの幅に設定された最小の子は同じ幅最も高い親として、100％の最大幅です。

私のコードに問題がありますか、何か間違ったことを理解していますか？私はちょうど100％の幅の問題を解決することができます知っているが、私はworkng最大幅ありえないが

nav { 
 
    color: white; 
 
    background-color: orange; 
 
    margin: auto; 
 
    padding: 0; 
 
    max-width: 100%; 
 
} 
 

 
nav li > span, nav a { 
 
    font-size: 1.3em; 
 
} 
 
nav ul { 
 
    padding: 0; 
 
    text-align: center; 
 
    max-width: 100%; 
 
    margin: auto; 
 
} 
 

 
nav li { 
 
    border-style: solid; 
 
    border-width: 0 1px 0 0; 
 
    border-color: rgba(0,0,0,.1); 
 
    list-style: none; 
 
    max-width: 100%; 
 
} 
 
.main-nav { 
 
    position: relative; 
 

 
} 
 
.sub-nav { 
 
    box-shadow: 5px 5px 10px rgba(0,0,0,.1); 
 
    z-index: 1; 
 
    position: absolute; 
 
    display: none; 
 
    background-color: white; 
 
    max-width: 100%; 
 
} 
 
.sub-nav li { 
 
    max-width: 100%; 
 
} 
 

 
.sub-nav li a { 
 
    max-width: 100%; 
 
} 
 
.main-nav:hover .sub-nav { 
 
    display: block; 
 
} 
 
@media screen and (min-width: 450px){ 
 
    nav li { 
 
    display: inline-block; 
 
    margin: 3px; 
 
    padding: 2px; 
 
    } 
 
    nav ul { 
 
    text-align: right; 
 
    padding: 0 5% 0 0; 
 
    } 
 
    .main-title { 
 
    text-align: left; 
 
    margin: 0 0 15px 15%; 
 
    padding: 15px 0 0 0; 
 
    color: orange; 
 
    font-size: 4em; 
 
    } 
 

 
}

<header> 
 
    <h1 class="main-title">This Is a Test</h1> 
 
    <nav> 
 
    <ul> 
 
     <li class="main-nav home-page active"> 
 
     <a href="index.html">HOME</a></li> 
 
     <li class="main-nav"> 
 
     <span> Content 1 </span> 
 
     <ul class="sub-nav"> 
 
      <li><a href="page1.html">Page 1</a></li> 
 
      <li><a href="page2.html">Page 2</a></li> 
 
      <li><a href="page3.html">Page 3</a></li> 
 
     </ul> 
 
     </li> 
 
     <li class="main-nav"> 
 
     <span> Content 2 </span> 
 
     <ul class="sub-nav"> 
 
      <li><a href="page4.html">Page 4</a></li> 
 
      <li><a href="page5.html">Page 5</a></li> 
 
      <li><a href="page6.html">Page 6</a></li> 
 
     </ul> 
 
     </li> 
 
     <li class="main-nav"> 
 
     <span> Content 3 </span> 
 
     <ul class="sub-nav"> 
 
      <li><a href="page7.html">Page 7</a></li> 
 
      <li><a href="page1.html">Page 8</a></li> 
 
      <li><a href="page1.html">Page 9</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header> 
 
<section> 
 
</section> 
 
<footer> 
 
</footer>

Demo

Answer 1

私は本当にわからない理由を理解したいのかmax-widthはそれと関係がありますが、テキストの配置を削除するだけで、中央にメニューが表示されます。

@media screen and (min-width: 450px) { 
    ... 
    nav ul { 
     /* text-align: right; */ 
     ... 
    } 

Demo

Here私はmax-widthのすべてのインスタンスを削除した、と何も変化していないようにみえます。