I am having alingment issue in navigation bar css - html

Question

In first image was taken from IE, its having full width for every content, but if u see in second image last menu content, not taking full width. how to solve this in both browser
HTML:
<div class="menu-section clearfix">
<div class="menu-element clearfix">
<ul>
<li class="active">Home</li>
<li>about us</li>
<li>administration</li>
<li>academics</li>
<li>research</li>
<li>activities</li>
<li>examination</li>
<li>facilites</li>
<li>contact us</li>
</ul>
</div>
</div>
CSS:
.menu-section {
background-color:#900000;
height: 56px;
}
.menu-element {
background-color: #400;
height: 50px;
}
.menu-element li {
float:left;
}
.menu-element li:hover {
background-color:#900000;
}
.menu-element li.active {
background-color:#900000;
}
.menu-element li a {
color:#fff;
text-transform:uppercase;
display: block;
padding: 18px 21px;
text-decoration:none;
font-weight: bold;
}

Answer 1

You need to add style to the ul as well:
.menu-element > ul {
list-style: none;
margin: 0; padding: 0;
}
Maintaining consistency across browsers is bit difficult, but you could ensure same rendering by two methods.
Specify a valid doctype on your html to ensure standards mode, and
Specify a box-sizing typically border-box in your stylesheet.
-
* {
box-sizing: border-box;
}
If you want to justify the menu options across the width, then you will have to make a few adjustments and a hack.
Apply a fixed width to the wrapping div, text-align:justify on the ul and display:inline-block on li are required.
Note 1: The display: inline-block is required, however it generates html white-spaces. In order to get rid of those white-spaces, html comments can be used in the markup of list items.
Note 2: The :after pseudo element in the hack is what seems to do the trick. However, that will create an unintended space below the ul. This space seems to be there because the elements are flushed across. If not justified, then this space does not appear.
.menu-element {
width: 100%; /* fixed width required on wrapping container */
}
.menu-element > ul {
list-style-type: none; /* getting rid of bullets */
margin: 0px; padding: 0px; /* getting rid of default indents */
text-align: justify; /* important to justify contents */
}
.menu-element li {
display: inline-block; /* required. float won't work. */
text-align: left; /* to properly align list items */
white-space: no-wrap; /* to prevent wrapping of list items if required */
}
.menu-element > ul:after {
/* this is the hack without which the list items won't get justified */
content:''; display: inline-block; width: 100%; height: 0;
}
Demo: http://jsfiddle.net/abhitalks/mv7qnfLe/4/
Full Screen Demo: http://jsfiddle.net/abhitalks/mv7qnfLe/4/embedded/result/
.

Answer 2

Try this:-
.menu-element ul {
padding: 0;
}

Answer 3

Try This
Give some width to ul element and add this style rule in your css:
.menu-element ul {
clear: both;
list-style:none;
margin: 0 auto;
text-align: center;
width: 92%;
}
I hope it works for you.