Insert arrow in the right of a div in html
<p>I have some panel filled by some elements. When these elements are in overflow, a horizontal scroll bar appears. I'd like to put an arrow to the right of the panel. I put the arrow into panel, but it goes the bottom of all the elements. I wish it were visible, positioned as in this draft: 
<a href="https://i.stack.imgur.com/KNxRv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KNxRv.png" alt="enter image description here"></a></p>

<p>This is the <strong>HTML</strong> code: </p>

<pre><code>&lt;div class="container"&gt; 
 &lt;div class="main"&gt;
  &lt;div id="menu" class="nav"&gt;                   
      &lt;ul&gt;
          &lt;li&gt; 
            &lt;div class="commesse"&gt;
              &lt;a href="#"&gt;&lt;img src="http://orig00.deviantart.net/fae8/f/2011/288/4/5/coca_cola_logo_png_by_ivettecaro-d4cxaok.png" class="logo"&gt;&lt;/a&gt;
                            &lt;ul class="matr"&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Text 23&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Text 78&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Text 1351&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Text 63&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Text 81&lt;/a&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/div&gt; 
                        &lt;div class="arrow-overflow-x"&gt;&lt;/div&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;div class="commesse"&gt;
                            &lt;a href="#"&gt;&lt;img src="http://www.abondance.com/Bin/bing-logo.png" class="logo"&gt;&lt;/a&gt;
                            &lt;ul class="matr"&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Text 1235&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Text 61&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Text 72&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Text 42&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Text 771&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Text 671,b&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Text 217.a&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Text 2754&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Text 2&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;Text 887&lt;/a&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;div class="commesse"&gt;
                            &lt;a href="#"&gt; 
                                &lt;span class="user icon"&gt;&lt;img class="img-circle" src="img/search.png"/&gt;&lt;/span&gt; 
                                &lt;span&gt;Text&lt;/span&gt;
                            &lt;/a&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
    &lt;a href="clienti/cliente1/cliente1.html"&gt; 
                            &lt;div class="commesse"&gt;
    &lt;span class="user icon"&gt;&lt;img class="img-circle" src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png"/&gt;&lt;/span&gt; 
    &lt;span&gt;Text&lt;/span&gt;
&lt;/div&gt;&lt;/a&gt;
&lt;/li&gt;
</code></pre>

<p> 
 </p>

<p>This is the CSS code:</p>

<pre><code>*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 
body, html { font-size: 15px; padding: 0; margin: 0; overflow-x: hidden;}  
</code></pre>

<p>.main:after { clear: both; }</p>

<pre><code>body {
font-family: "Open Sans", Helvetica, sans-serif; 
color: #89867e;
background: #f9f9f9;
background-image: url("../img/bg-commesse.jpg");
}

a {
color: #333;
text-decoration: none;
}

a:hover {
color: #fff;
} 
.main {
max-width: 82.667em; 
}  

.logo {
max-height: 76px;
}

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

.nav li {
display: flex;
float: none;
width: 100%;
height: 164px;
border: 2px solid rgba(255,255,255,0.1);
-webkit-border: 2px solid rgba(255,255,255,0.1);
-moz-border: 2px solid rgba(255,255,255,0.1);
-o-border: 2px solid rgba(255,255,255,0.1);
margin-bottom: 30px;
overflow-x: auto;
overflow-y: hidden; 
}  
.nav a { 
color: rgba(249, 249, 249, .9);
text-decoration: none;
padding: 0em 0.8em 0em; 
white-space: nowrap;
-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;
} 

.commesse {
display: flex;
align-items: center;
}

.commesse ul li {
padding: 17px;
margin-left: 20px;
display: inline;
color: #fff;
font-size: 28px;
}

.commesse ul {
white-space: nowrap;
} 

.nav li:nth-child(6n+1) {
background: #e87352;
}

.nav li:nth-child(6n+2) {
background: #ebc85e;
}

.nav li:nth-child(6n+3) {
background: #3bbec0;
}

.nav li:nth-child(6n+4) {
background: #4ad585;
}

.nav li:nth-child(6n+5) {
background: rgb(27, 54, 71);
}

.nav li:nth-child(6n+6) {
background: rgb(21, 40, 54);
} 

.commesse li:nth-child(6n+1) {
background: rgb(208, 101, 3);
}

.commesse li:nth-child(6n+2) {
background: rgb(233, 147, 26);
}

.commesse li:nth-child(6n+3) {
background: rgb(22, 145, 190);
}

.commesse li:nth-child(6n+4) {
background: rgb(22, 107, 162);
}

.commesse li:nth-child(6n+5) {
background: rgb(27, 54, 71);
}

.commesse li:nth-child(6n+6) {
background: rgb(21, 40, 54);
}

.user{
border-radius: 50%;
display: block;
height: 120px;  
width: 120px;
}

.user img{
background: none repeat scroll 0 0 #FFFFFF;
border: 4px solid #FFFFFF;
width: 100%;
vertical-align: middle;
}

.img-circle {
border-radius: 50%;
}

.matr a {
display: inherit;
color: inherit;
text-decoration: inherit;
padding: inherit;
white-space: inherit; 
}

.arrow-overflow-x {
background-image: url("http://lib.store.yahoo.net/lib/artbook/largerightarrowblack.png");
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
content: "";
display: table;
height: 30px; 
width: 30px; 
margin: 0px;   
}
</code></pre>

<p>And this is the running code: <a href="https://jsfiddle.net/r1b41e20/" rel="nofollow noreferrer">JSFIDDLE</a>
Thank you!</p>