Menu (ul & li) driller

Hej med jer..
Jeg har givet lidt op på den her menu...
Den skal gerne virke lidt mere responsive end den gør nu..
Den skal være centreret på skærmen og blive mindre og mindre i takt med opløsningen bliver lavere...

HTML:
<div style="clear:both"></div>
    <ul id="menu">
        <li><a class="link-1" href="#">Forside</a></li>
        <li><a class="link-1" href="#">Portfolio</a></li>
        <li><a class="link-1" href="#">Om mig</a></li>
        <li><a class="link-1" href="#">Kontakt</a></li>
    </ul>
    <div style="clear:both"></div>
</div><!--end header -->

CSS:
ul#menu li a {
    font-size: 25px;
    color: #676666;
    text-decoration: none;
}

#menu {
      background: #ffffff;
      width:1024px;
      text-align: center;
      padding-top: 45px;
      padding-bottom: 20px;
      float: middle;
      margin:0 auto;
list-style:none;
}

ul#menu {
    list-style: none;
    padding-top: 45px;
    position:relative;
    left:15%; 
}

ul#menu li {
    float: left;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    list-style:none;
}


.link-1 {
  transition: 0.3s ease;
  background: #ffffff;
  color: #00000;
  font-size: 20px;
  text-decoration: none;
  border-top: 4px solid #ea5394;
  border-bottom: 4px solid #ea5394;
  padding: 20px 0;
  margin: 0 20px;
}

.link-1:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0;
}

Er der en af jer der lige hurtigt kan spotte en dum opbygning/fejl? :-)