Anchor tags not working

Question

I have a few anchor tags in my html that for some reason aren't working. As far as I can tell there is nothing wrong with the code so I am completely at a loss. Maybe I need a fresh pair of eyes to look it over to see if there is something obvious that I am missing? This website is not loaded onto a server yet but here is the code I am having issues with.

 <div id="navigation">
        <div class="wrapper">
            <div class="right">
                <div class="phone-number">
                    <p>24hr Turn Around Time 1-877-229-9665</p>
                </div>

                <div class="social-media">
                    <a href="https://www.facebook.com/archfitters" target="blank"><img src="images/facebook.png"></a>
                    <a href="https://twitter.com/archfitters" target="blank"><img src="images/twitter.png"></a>
                    <a href="http://www.yelp.com/biz/arch-fitters-portland-4" target="blank"><img src="images/yelp.png"></a>
                </div>
            </div>

            <div class="left">    
                <div class="logo">
                    <a href="/"><img src="images/logo.png"></a>
                </div>

                    <div class="text">
                         <p>Custom Made Orthotics</p> 
                    </div> 
            </div>

            <div class="navbar">
                <nav>
                    <a href="index.html">HOME</a>
                    <a href="services.html">SERVICES</a>
                    <a href="company.html">COMPANY</a>
                    <a href="contactus.html">CONTACT US</a>
                    <a href="news.html">NEWS</a>
                </nav>
            </div>

            <div class="clear"></div>
        </div>
</div>

#header {
    font-family: calibri;   
}

.text {
    text-align:left;
    font-size: 20px;        
} 

.navbar {
    text-align: center;
    font-color: #000000;
    padding: 30px 20px 4px;
}

.phone-number {
    text-align: right;
}

#navigation {
    position: fixed;
    top: 0;
    width: 100%;
    color: #000000;
    height: 80px;
    padding-top: 5px;
    background-color: #ffffff;
    z-index: 1;
}

#navigation a {
    font-size: 20px;
    padding-left: 5px;
    padding-right: 15px;
    color: #000000;
    text-decoration: none;
}

#navigation a:hover {
    color: grey;
} 

.social-media {
    text-align: right;  
    margin-top: 40px;
}

Answer 1

Fiddle , they seem to actually be working, as in they are all working links.

<div class="social-media">
                <a href="https://www.facebook.com/archfitters" target="blank"><img src="images/facebook.png"></a>
                <a href="https://twitter.com/archfitters" target="blank"><img src="images/twitter.png"></a>
                <a href="http://www.yelp.com/biz/arch-fitters-portland-4" target="blank"><img src="images/yelp.png"></a>
            </div>
        </div>

Answer 2

Ok so I had a co-worker fix this issue. changed the position to relative and added a z-index of 20. Now they are working!