title: The menu of my site doesn't look right when I view it on my iPhone
body: <p>When I view <a href="http://americaspoeticsoul.com" rel="nofollow noreferrer">www.americaspoeticsoul.com</a> on my iPhone, the menu overflows for some reason. See:</p>
  
  <p><img src="https://i.stack.imgur.com/Y81w8.png" alt="Menu overflows on iPhone"></p>
  
  <p>And it even looks worst on the other pages because of the title: </p>
  
  <p><img src="https://i.stack.imgur.com/kzJw7.png" alt="Worst on other pages - overflows over the header"></p>
  
  <p>Anyone know why it's like this? And is there a way to fix it? Here's the CSS for the menu:</p>
  
  <pre><code>/*Menu*/
  
  #menu {
      margin-bottom:15px;
      width:450px;
  }
  
  #menu ul { /* remove bullets and list indents */
      list-style: none;
      margin: 0;
      padding: 0;
  }
  
  #menu ul li {
      float:left;
  }
  
  #menu ul li a {
      display:block;
      padding:10px;
      margin:2px;
      background-color:#D41C1C;
      text-decoration:none;
      font-weight:bold;
      font-size:15px;
      color:white;
      -webkit-border-radius:10px;
      -moz-border-radius:10px;
      -o-border-radius:10px;
      border-radius:10px;
  }
  
  #menu ul li a:hover {
      display:block;
      padding:10px;
      margin:2px;
      background-color:#FF1C1C;
      text-decoration:none;
      font-weight:bold;
      font-size:15px;
      color:white;
      -webkit-border-radius:10px;
      -moz-border-radius:10px;
      -o-border-radius:10px;
      border-radius:10px;
  }
  
  #menu ul li a.current_link {
      display:block;
      padding:10px;
      margin:2px;
      background-color:#FF1C1C;
      text-decoration:none;
      font-weight:bold;
      font-size:15px;
      color:white;
      -webkit-border-radius:10px;
      -moz-border-radius:10px;
      -o-border-radius:10px;
      border-radius:10px;
  }
  </code></pre>
  
  <p>Thanks,</p>
  
  <p>Nathan</p>