title: How to Can I make my menu responsive?
body: <p>I'm creating my first blog to aside, but isn't responsive.
  Anyone can help me to do become this small menu responsive? With my pc I see bad and also with other pc isn't good, if i zoom/rezoom it's a disaster. For the printer is many bad :D</p>
  
  <p>Here the fiddle:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>main {
    margin: 1px;
  }
  aside.left {
    background-color: #eee;
    height: 10%;
    width: 15%;
    padding: 2.5%;
    display: block;
    border: 1px solid #000;
  }
  aside.left &gt; p {
    color: #444;
    text-align: center;
    display: inline-block;
  }
  aside.left &gt; nav &gt; ul {
    list-style: none;
    text-align: center;
    display: inline-block;
    margin: 0 auto;
  }
  aside.left &gt; nav &gt; ul &gt; li {
    display: block;
    margin-top: 20px;
    position: relative;
    bottom: 20%;
  }
  aside.left &gt; nav &gt; ul &gt; li &gt; a {
    text-decoration: none;
    color: #fff;
    background-color: #444;
    padding: 10%;
    transition: all 1s ease;
  }
  aside.left &gt; nav &gt; ul &gt; li &gt; a:hover {
    color: #444;
    background-color: #fff;
  }
  aside.left &gt; p &gt; 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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main&gt;
    &lt;aside class="left"&gt;
      &lt;p&gt;Mattew
        &lt;img src="http://avatarfiles.alphacoders.com/456/45610.png" alt="avatar"&gt;
      &lt;/p&gt;
      &lt;nav&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="1#2"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="2#2"&gt;About&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="3#2"&gt;Contact&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/aside&gt;
    &lt;aside class="right"&gt;
      &lt;article&gt;
        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!
      &lt;/article&gt;
    &lt;/aside&gt;
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>