How to keep a heading and a set of sub-navigations from crashing into each other when decreasing browser size

Question

as on this webpage http://chelseachendesigns.com/collections.html when you drag the browser to be smaller horizontally the subnavigations S|S collecitons and F|W collection crashes onto the heading Chelsea Chen. Any solution for this pls? thank you!

<div id="wrapper">
<header id="top">
  <h1> &nbsp;C H E L S E A &nbsp; C H E N </h1>
  <nav id="subnav">
    <a href="collections.html" class="ss">S|S Collection</a>
    <a href="FW collection.html">F|W Collection</a>
  </nav>
</header>
</div>


#wrapper #top h1 {
    font-family: poiret-one;
    font-style: normal;
    font-weight: 400;
    color: #000000;
    font-size: xx-large;
    position: static;
    display: block;
}
#subnav a {
    width: 40%
%;
    float: left;
    display: block;
    font-style: normal;
    color: #686868;
    font-family: gruppo;
    font-variant: normal;
    font-size: medium;
    text-align: left;
    width: 75%;
    visibility: visible;
    text-decoration: none;
    left: 0px;
    font-weight: 300;
    text-shadow: 0px 0px;
    clear: none;
    overflow-x: visible;
    margin-left: 22%;
    margin-right: -53%;
    padding-left: 2%;
    padding-right: 2%;
    overflow-y: visible;
}