CSS and HTML Navigation Bar Error

I am trying to make a basic site with HTML & CSS, with a navigation bar, but I have a problem with it [below]:

body
{
    background-color: #666;
}

.font_title
{
    font-family: "Segoe UI";
    font-weight: bold;
    font-size: 60px;
    text-align: center;
}

#title
{
    width: 800px; 
}

#container
{
    position: relative;
    margin: auto;
    width: 800px;
    height: 995px;
    background-color: #CCCCCC;
}

#navigation_holder
{
    position: relative;
    margin: auto;
    width: 800px;
}
.navigation_button
{
    font-family: "Segoe UI";
    text-align: center;
    font-size: 26px;
    width: 200px;
    height: 40px;
    background-color: #09C;
}
.navigation_button:hover
{
    background-color: #09F;
}


<div id="container"> <!-- The main container -->
<div class="font_title", id="title"> Our Site</div>
<div id="navigation_holder">
<div id="navigation_button_1", class="navigation_button"> Home </div> 
<div id="navigation_button_2", class="navigation_button"> About </div>
<div id="navigation_button_3", class="navigation_button"> Services </div>
<div id="navigation_button_4", class="navigation_button"> Contact </div>
</div>

<!-- More DIVs in the container -->

</div>

The problem is - all my navigation buttons are stacked up ontop of each other, not on a row. What am I doing wrong?

The problem with the page

Solution

Instead of making them divs, use anchor tags inside lists. Here's the image and the complete working code for you:

enter image description here

<html>
<head>
<style>

body
{
    background-color: #666;
}

.font_title
{
    font-family: "Segoe UI";
    font-weight: bold;
    font-size: 60px;
    text-align: center;
}

#title
{
    width: 800px; 
}

#container
{
    position: relative;
    margin: auto;
    width: 800px;
    height: 995px;
    background-color: #CCCCCC;
}

#navigation_holder
{
    position: relative;
    margin: auto;
    width: 800px;
}
.navigation_button
{
    font-family: "Segoe UI";
    text-align: center;
    font-size: 26px;
    width: 200px;
    height: 40px;
    background-color: #09C;
}
.navigation_button:hover
{
    background-color: #09F;
}

ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

li
{
float:left;
}


a:link,a:visited
{
display:block;
width:200px;
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
a:hover,a:active
{
background-color: #09F;
}

</style>
</head>

<body>
<div id="container"> <!-- The main container -->
<div class="font_title", id="title"> Our Site</div>
<div id="navigation_holder">
<ul>
<li id="navigation_button_1" > <a href="#">  Home </a></li>
<li id="navigation_button_2" > <a href="#">  About </a></li>
<li id="navigation_button_3" > <a href="#">  Services </a></li>
<li id="navigation_button_4" > <a href="#">  Contact </a></li>
</ul>
</div>

<!-- More DIVs in the container -->

</div>
</body>
</html>