使导航可点击的问题

Question

我正在创建一个投资组合网站，我在这里查看了可能无法解决问题的问题。我的标题中有2个链接，+标识主页。一个链接是可点击的，另一个链接不是。我正在使用HTML5：

<div id="container">

<div id="top">

    <div class="banner">

    <div id="portfolio"><a href="portfolio.html">portfolio</a></div>

    <div id="logo"><a href="index4.html"><img class="logo" src="images/mira-logo.png" alt="mira-logo"></a></div>

    <div id="about"><a href="about.html">about</a></div>

    </div>

</div>

<div id="body"> 
</div>

<div id="footer">    
</div>  


</div>

这是CSS：

#container{
margin: 0 auto;
width: 100%;
min-height: 100%; 
position: relative;  }

img.logo { 
text-align: center;
padding-top: 0.7%;
width: 18%;
height: 18%; 
position: relative; }

#top {
text-align: center;
background-color:#FFF;
text-decoration: none; }

.banner {
margin-top: 14%;
width: 100%;
background-color:#000000;
height: 28px;
text-align: center;
position: absolute;
z-index: 1;
left: 0;
visibility: visible; }

/*Nav Links*/   

#portfolio {
text-align: center;
float: left;
font-family: helvetica, arial;
padding-top: 0.5%;
padding-left: 25%;
position: relative;
z-index: 2;
top: 0;
visibility: visible; }

#logo {
text-align: center;
position: fixed;
z-index: 2;
top: 0;
visibility: visible; }

#about {
text-align: center;
float: right;
padding-top: 0.5%;
font-family: helvetica, arial;
padding-right: 25%;
position: relative;
z-index: 2;
top: 0;
visibility: visible; }

/**/    

a:link {
font-size: 95%;
display: inline;
text-align: center;
text-decoration: none;
color: #FFF; }

a:hover, a:active {
font-size: 110%;
text-decoration: none;
color: #CCC; }

a:visited {
font-size: 95%;
text-decoration: none;
color: #FFF; }

/* Body/ Section */ 

#body {
position: fixed;
position: absolute;
width: 100%;
height: 100%;
text-align: center; }

html, body {
margin: 0;
padding: 0;
height: 100%; }

我确实为每个a:links div以及#portfolio指定了#about，但删除了他们认为它会解决这个问题！任何帮助都将非常感激。

谢谢！