Horizontal scroll in CSS when overflow-x

Question

In a web application I have some panel. In that panel I have some labels that I'm going to retrieve by json, so I will not know the exact number. I'd like to add a horizontal scroll when these labels overflow-x in their div. I've done it using white-space: nowrap and overflow: auto , but then the labels appear shifted downwards. They are no longer aligned with the title and the icon in the panel. And I'm not able to align them.

This is the HTML code :

            <nav id="menu" class="nav">                 
                <ul>
                    <li>
                        <a href="#">
                            <span class="icon">
                                <i aria-hidden="true" class="icon-home"></i>
                            </span>
                            <span>Client 1</span>
                            <div class="commesse">
                                <ul>
                                    <li>Matr 23</li>
                                    <li>Matr 78</li>
                                    <li>Matr 1351</li>
                                    <li>Matr 63</li>
                                    <li>Matr 81</li>
                                </ul>
                            </div>
                        </a> 
                    </li>
                    <li>
                        <a href="#">
                            <span class="icon"> 
                                <i aria-hidden="true" class="icon-services"></i>
                            </span>
                            <span>Client 2</span>
                            <div class="commesse">
                                <ul>
                                    <li>Matr 1235</li>
                                    <li>Matr 61</li>
                                    <li>Matr 72</li>
                                    <li>Matr 42</li>
                                    <li>Matr 771</li>
                                    <li>Matr 671,b</li>
                                    <li>Matr 217.a</li>
                                    <li>Matr 2754</li>
                                    <li>Matr 2</li>
                                    <li>Matr 887</li>
                                </ul>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="icon">
                                <i aria-hidden="true" class="icon-portfolio"></i>
                            </span>
                            <span>Client 3</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="icon">
                                <i aria-hidden="true" class="icon-blog"></i>
                            </span>
                            <span>Client 4</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="icon">
                                <i aria-hidden="true" class="icon-team"></i>
                            </span>
                            <span>Client 5</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="icon">
                                <i aria-hidden="true" class="icon-contact"></i>
                            </span>
                            <span>Client 6</span>
                        </a>
                    </li>

                </ul>
            </nav>

And this is the CSS concerning the mentioned html:

.nav ul {
max-width: 1240px;
margin: 0;
padding: 0;
list-style: none;
font-size: 1.5em;
font-weight: 300;
max-height: 388px;
} 

.nav li {
display: block;
float: none;
width: 100%;
height: 164px;
border: 2px solid rgba(255,255,255,0.1);
margin-bottom: 30px;
overflow: auto;
}

.nav li i {
display: inline-block;
padding: 27% 28%;
border: 4px solid transparent;
border-radius: 50%;
font-size: 1.5em;
background: rgba(255,255,255,0.1); 
}


.nav li span {
display: block;
text-align: left;
margin-right: 11px;
}

.nav a {
display: block;
color: rgba(249, 249, 249, .9);
text-decoration: none;
padding: 0.8em; 
-webkit-transition: color .5s, background .5s, height .5s;
-moz-transition: color .5s, background .5s, height .5s;
-o-transition: color .5s, background .5s, height .5s;
-ms-transition: color .5s, background .5s, height .5s;
transition: color .5s, background .5s, height .5s;
}

.nav li span, 
.nav li span.icon {
display: inline-block;
} 

.nav li .icon + span {
font-size: 1.3em;
}

.icon + span {
position: relative;
top: -0.1em;
}

.icon {
padding-top: .8em;
}

.commesse, .commesse ul {
display: inline;
}  

.commesse ul {
 white-space: nowrap;

}

.commesse ul li {
 display: inline;  
}

And here is the FULL CODE : enter link description here

Answer 1

Just remove white-space: nowrap; from .commesse ul and give it to .nav a

Updated Plunker