list in html going to next line leaving white space

Question

i am listing some images in my html website using the following code:

#tabss li
{
float:left;
text-align:center;
font-family:Arial;
font-size:14px;
color:#fff;
width:205px;
padding:20px 0px;
list-style-type:none;
}

#tabss li img
{
margin-bottom:10px;
width:50px;
height:auto; 
border:5px solid #fff; 
border-radius:50%;
background:#fff;
}

#tabss li:nth-child(1){background:#00C3FF;}
#tabss li:nth-child(2){background:#00B8F0;}
#tabss li:nth-child(3){background:#00ACE0;}
#tabss li:nth-child(4){background:#00A2D4;}
#tabss li:nth-child(5){background:#0097C4;}
#tabss li:nth-child(6){background:#0085AD;}

h2
{
margin:0px;
padding:0px;
font-size:16px;
font-weight:normal;
}

#tabss li:hover
{
margin-top:-20px;
padding:20px 0px 40px 0px;
cursor:pointer;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}

#tabss li:hover img
{
border:5px solid #7ED3ED;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
#tabss li:hover h2{color:#ACE2F2;
}

<section>
    <div class="container">
<div  class="row">
    <ul id="tabss">
 <li>
<img src="http://icons-search.com/img/marvilla-us/brights.zip/brights-brights_icons-star_favorites.ico-128x128.png"/>
<h2>About Us</h2>
</li>
<li >
<img src="http://icons-search.com/img/marvilla-us/brights.zip/brights-brights_icons-star_favorites.ico-128x128.png"/>
<h2>Service</h2>
</li>
<li>
<img src="http://icons-search.com/img/marvilla-us/brights.zip/brights-brights_icons-star_favorites.ico-128x128.png"/>
<h2>Clients</h2>
</li>
<li>
<img src="http://icons-search.com/img/marvilla-us/brights.zip/brights-brights_icons-star_favorites.ico-128x128.png"/>
<h2>Achievements</h2>
</li>
<li>
<img src="http://icons-search.com/img/marvilla-us/brights.zip/brights-brights_icons-star_favorites.ico-128x128.png"/>
<h2>Take a tour</h2>
</li>
<li>
<img src="http://icons-search.com/img/marvilla-us/brights.zip/brights-brights_icons-star_favorites.ico-128x128.png"/>
<h2>Contact Us</h2>
</li>
</ul>
</div>
</div>
</section>

now when i am loading the page, the list is going in next line even though there is space in the same line like the below image:

i am trying to fit the screen with the list without white spaces left or right side, when i am giving margin left or right properties, still its going in next line, can anyone please tell me whats wrong with my code