CSS Horizal Menu UL issue

Hi, sorry to disturb you. I am trying to modify the header menu horizontally (bootstrap disabled) and I have the css like this:

.navbar {
		 width: 100%
		 padding: 20px;
		 color: rgb(153, 153, 153);
		 overflow: visible;
		 margin-bottom: 20px !important;

.navbar-inner {
    border: 1px solid rgb(238, 238, 238);
    min-height: 40px;
    padding-right: 20px;
    padding-left: 20px;
    background-color: rgb(213, 213, 213);
    background-image: url("../../media/menu.png");
    background-repeat: repeat-x;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25), 0px -1px 0px rgba(0, 0, 0, 0.1) inset;

.navbar .nav {
    position: relative;
    left: 0px;
    display: block;
    float: left;
    margin: 0px 10px 0px 0px;

.nav ul {
  list-style: none outside none;

As you can see I have list-style set to none but it still showing the menu in vertical order. It should be horizontal. See screenshot.

Any help will be much appreciated.

General, non-Roots/non-Bootstrap, questions are best kept to Stack Overflow or other similar support forums; you’re much more likely to get an answer there.

Hint: <ul> and <li> are block elements, so they will not display: inline; unless you tell them to.