メニューを反応させるにはどうしたらいいですか？

Question

私は最初のブログを作成していますが、反応がありません。 誰でもこの小さなメニューに対応するのに役立ちますか？私のPCで私は悪い参照してくださいまた、他のPCと、私はズーム/ rezoomそれは災害の場合、良いではありません。ここでD

フィドル：プリンタの場合、多くの悪いあなたがメニューのコンテナにmin-widthを追加する必要が

main { 
 
    margin: 1px; 
 
} 
 
aside.left { 
 
    background-color: #eee; 
 
    height: 10%; 
 
    width: 15%; 
 
    padding: 2.5%; 
 
    display: block; 
 
    border: 1px solid #000; 
 
} 
 
aside.left > p { 
 
    color: #444; 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 
aside.left > nav > ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
} 
 
aside.left > nav > ul > li { 
 
    display: block; 
 
    margin-top: 20px; 
 
    position: relative; 
 
    bottom: 20%; 
 
} 
 
aside.left > nav > ul > li > a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    background-color: #444; 
 
    padding: 10%; 
 
    transition: all 1s ease; 
 
} 
 
aside.left > nav > ul > li > a:hover { 
 
    color: #444; 
 
    background-color: #fff; 
 
} 
 
aside.left > p > img { 
 
    border-radius: 100%; 
 
    width: 100px; 
 
    border: 3px solid #444; 
 
} 
 
aside.right { 
 
    width: 500px; 
 
    position: relative; 
 
    left: 170px; 
 
    background-color: #eee; 
 
    border: 1px solid #000; 
 
    line-height: 100px; 
 
    bottom: 310px; 
 
}

<main> 
 
    <aside class="left"> 
 
    <p>Mattew 
 
     <img src="http://avatarfiles.alphacoders.com/456/45610.png" alt="avatar"> 
 
    </p> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="1#2">Home</a> 
 
     </li> 
 
     <li><a href="2#2">About</a> 
 
     </li> 
 
     <li><a href="3#2">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </aside> 
 
    <aside class="right"> 
 
    <article> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam nam a non numquam, architecto doloribus nulla voluptatum vel possimus facilis odio laudantium quod aut dolorum, obcaecati cupiditate explicabo. Eum, magnam! 
 
    </article> 
 
    </aside> 
 
</main>

Answer 1

、およびleft: 0;を追加すると、メニューを固執するのに役立ちます左にありますが、それはあなたによって異なります。

これを試してみてください：D：ここで

aside.left { 
    background-color: #eee; 
    height: 10%; 
    width: 15%; 
    min-width: 100px; 
    padding: 2.5%; 
    left: 0; 
    display: block; 
    border: 1px solid #000; 
} 

が助けをFiddle