My Horizontal Navigation Bar Won't Display Horizontally, Why?

My navbar refuses to display horizontally. I have put all li elements floating to the left and added the display:inline-block element to the individual blocks and to the list elements and to the list itself and tried every combination. I finally got the list to how I like it and now the only thing keeping this list from being perfect is that it is not displaying horizontally. WHY???

<head>
    <title>Troop 25 Homepage</title>
    <style>
        .navbar {
            float: top;
            width: 182.8px;
            height: 30px;
            display: inline-block;
        }

        li {
            float: left;
            display: inline-block;
        }

        .nav {
            list-style-type: none;
            margin: 0;
            padding: 0;
            position: relative;
            display: inline-block;
        }

        a:link, a:visited {
            display: inline-block;
            width: 182.8px;
            line-height: 30px;
            padding-top: 13px;
            padding-right: 5px;
            padding-bottom: 4px;
            padding-left: 5px;
            text-decoration: none;
            text-align: center;
            background-color: #006b00;
            color: white;
            font-weight: bold;
            float: left;
        }

        a:hover, a:active {
            background-color: #C0C0C0;
        }

        a:active {
            color: grey;
        }

        .nav_bar_text {
            font-size: 17px;
        }

        .Mackin_text {
            font-size: 17px;
            vertical-align: text-center;
        }

        h1 {
            text-decoration: underline;
            color: #006b00;
        }

        p {
            font-size: 30px;
        }
    </style>
</head>

Here is my HTML for my list.

 <div class="navbar">
    <ul class="nav">
        <li><a class="nav_bar_text" href=#Home>Home</li></a>
        <li><a class="nav_bar_text" href="#Resources">Resources</li></a>
        <li><a class="nav_bar_text" href="#Calendar">Calendar</li></a>
        <li><a class="nav_bar_text" href="#Year Plan">Year Plan</li></a>
        <li><a class="nav_bar_text" href="#Gallery">Gallery</li></a>
        <li><a class="nav_bar_text" href="#Videos">Videos</li></a>
        <li><a class="Mackin_text" href="#Mackin Society">Mackin Society</li></a>
    </ul>
</div>

Solution

Change your .navbar width to be 100%

.navbar
{
  float:top;
  width:100%;
  height:30px;
  display:inline-block;
}

Try this