html - CSS menu wrapper overflowing on iphone screen -

i have website, please see: death valley

in various browsers site looking ok. however, on ios devices there seems sort of overflow menu wrapper. guess. there may else causing it. black large box @ top right hand side of screen. please view site on apple device see mean. css , html below. please tell me going wrong?

css:

body {     margin: 0;     padding: 0;     background: #000000;     font-family: 'trebuchet ms', helvetica, arial;     font-size: 13.5px;     color: #8a8985; }  #wrapper {     overflow: visible;     background: #ffffff; }  .container  {     width: 1200px;     min-width: 1200px;     margin: 0px auto;     device-width:100%;     overflow: visible; }  #header-wrapper {     overflow: visible;     height: 600px;     device-width: 100%;     min-width: 100%; }  #header {     height: 200px;     margin: 0 auto;     padding: 50px 0px 0px 0px;     overflow: visible;     position: relative;  }  #logo {     overflow: visible;     height: 150px;     float: center; }  #menu-wrapper {     overflow: visible;      height: 52px;     margin-bottom: 2em;     background: #000000;     position: relative;      margin: 0 auto;     padding: 0px 0px 0px 0px;  }  #menu {     overflow: hidden;      height: 52px;  }  #menu ul  {     margin: 0;     padding: 0px 0px 0px 0px;     list-style: none;     line-height: normal;     text-align: center;     position: relative;  }  #menu li {     display: inline-block;     float: center;     position: relative;  }  #menu {     display: inline-block;     float: center;     padding: 0px 30px;     line-height: 52px;     border: none;     text-decoration: none;     text-transform: lowercase;     text-align: center;     text-transform: uppercase;     font-family: 'trebuchet ms', helvetica, ariel;     font-size: 14px;     font-weight: 300;     color: #ffffff; }  #menu a:hover, #menu .current_page_item {     background: #ccff00;     text-decoration: none;     color: #000000; }  #page {     overflow: visible;     width: 1200px;     float: center; }  #column1 {     float: left;     width: 384px;     margin-right: 20px; }  #column2 {     float: left;     width: 384px; }  #column3 {     float: right;     width: 384px; }  .box1 {     overflow: hidden;     height: 200px;     background: url(images/img04.jpg) no-repeat center bottom; } 

here html point:

<div id="wrapper">     <div id="menu-wrapper">         <div id="menu" class="container">             <center>                 <ul>                     <li class="current_page_item"><a href="index.html">home</a></li>                     <li><a href="about.html">about</a></li>                     <li><a href="animation.html">animation</a></li>                     <li><a href="contact.html">contact</a></li>                 </center>             </ul>         </div>     </div>      <div id="logo" class="container">         <center>             <div class="image">                 <img src="images/logo.gif" width="474" height="150" alt="death valley illustration logo" />                 <center/>             </div>         </div>          <div id="page" class="container">             <center>                 <a href="mailto:gavin@deathvalleyillustration.org?subject=i want pay money" class="button">email me!</a> <a href="https://twitter.com/deathvalley_" class="button">follow me!</a>                 <div class="entry">                     <p>                         welcome <b> death valley illustration. </b> </br>  can browse of recent designs & commissions scrolling down page , clicking on of images in projects section below.</br>                         please in touch if have potential collaborations or freelance illustration work discuss.                     </p>                 <center>              <hr>             </div> 

you have set width in body-

body {min-width: 1200px;}