white space in navigation - html

Question

I want to make this navigation that it looks like in tiled format. But here some white spaces coming at the end of the one row. Is it possible to make it form like a border surrounded by navigation & inside it navigation looks like proper tiles instead of some white space..
My Code..
.nav {
width: 960px;
margin: 50px auto;
border: 1px solid #06c;
display: table
}
.nav ul {
padding: 0;
margin: 0
}
.nav ul li {
list-style: none;
float: left;
border: 1px solid #06C;
font-family: Swis721 Cn BT;
font-weight: bold;
display: block
}
.nav ul li a {
text-decoration: none;
color: #06C;
padding: 10px 20px 10px 12px;
display: block
}
.nav ul li a:hover {
color: #fff;
background: #06c
}
<div class="nav">
<ul>
<li>ALL
</li>
<li>AGENCY
</li>
<li>AUTOMOBILES
</li>
<li>BANKING
</li>
<li>CONSUMER DURABLE & FMCG
</li>
<li>CONSULTING
</li>
<li>EDUCATIONAL
</li>
<li>FINANCIAL SERVICES
</li>
<li>HOSPITALITY
</li>
<li>INFRASTRUCTURE & REAL ESTATE
</li>
<li>INTERNATIONAL
</li>
<li>IT
</li>
<li>LEGAL
</li>
<li>MANFACTURING
</li>
<li>MARINE
</li>
<li>MEDIA
</li>
<li>OIL & GAS
</li>
<li>ONLINE
</li>
<li>OTHERS
</li>
<li>PHARMA
</li>
<li>RETAIL
</li>
<li>THEME PARK
</li>
</ul>
</div>

Answer 1

Probably this will work as i have given some special styles (css) to some 'li' however this will not provide 100% output as you want but still effective in such case..
.nav {
width: 970px;
margin: 50px auto;
border:0px solid;
display: table
}
.nav ul {
padding: 0;
margin: 0
}
.nav ul li {
list-style: none;
float: left;
border: 1px solid #06C;
font-family: Swis721 Cn BT;
font-weight: bold;
display: block;
min-width:5%;
width:auto;
text-align:center
}
.nav ul li a {
text-decoration: none;
color: #06C;
padding: 10px 20px 10px 12px;
display: block
}
.nav ul li a:hover {
color: #fff;
background: #06c
}
<div class="nav">
<ul>
<li>ALL
</li>
<li>AGENCY
</li>
<li>AUTOMOBILES
</li>
<li>BANKING
</li>
<li>CONSUMER DURABLE & FMCG
</li>
<li>CONSULTING
</li>
<li style="width:25%">EDUCATIONAL
</li>
<li>FINANCIAL SERVICES
</li>
<li>HOSPITALITY
</li>
<li>THEME PARK
</li>
<li>INTERNATIONAL
</li>
<li>IT
</li>
<li>LEGAL
</li>
<li>MANFACTURING
</li>
<li style="width:15%">MARINE
</li>
<li>MEDIA
</li>
<li>OIL & GAS
</li>
<li>ONLINE
</li>
<li>OTHERS
</li>
<li>PHARMA
</li>
<li>RETAIL
</li>
<li style="width:45%">INFRASTRUCTURE & REAL ESTATE
</li>
</ul>
</div>
Note : Keep in mind the output will be different in such case like change of fonts, or any navigation position change other than it is written now..

Answer 2

you can use this
.nav{
border:0px solid;
}
.nav ul li{
width:25%;/*according to your need you can increase or decrease*/
}

Answer 3

.nav ul {
padding: 0;
margin: 0
}
.nav {
width: 960px;
margin: 50px auto;
border: 1px solid #06c;
display: table;
padding: 0px 0px;
font-size: 100%;
}
.nav ul li {
list-style: none;
float: left;
border: 1px solid #06C;
font-family: sans-serif;
font-weight: bold;
min-width: 7.8%;
width: auto;
font-size: inherit;
text-align: center;
}
.nav ul li a {
text-decoration: none;
color: #06C;
adding: 10px 12px 10px 12px;
display: list-item;
WIDTH: AUTO;
min-width: 100%;
box-sizing: border-box;
}
.nav ul li a:hover {
color: #fff;
background: #06c
}
<div class="nav">
<ul>
<li>ALL
</li>
<li>AGENCY
</li>
<li>AUTOMOBILES
</li>
<li>BANKING
</li>
<li>CONSUMER DURABLE & FMCG
</li>
<li>CONSULTING
</li>
<li>EDUCATIONAL
</li>
<li>FINANCIAL SERVICES
</li>
<li>HOSPITALITY
</li>
<li>INFRASTRUCTURE & REAL ESTATE
</li>
<li>INTERNATIONAL
</li>
<li>IT
</li>
<li>LEGAL
</li>
<li>MANFACTURING
</li>
<li>MARINE
</li>
<li>MEDIA
</li>
<li>OIL & GAS
</li>
<li>ONLINE
</li>
<li>OTHERS
</li>
<li>PHARMA
</li>
<li>RETAIL
</li>
<li>THEME PARK
</li>
</ul>
</div>