title: Align item horizontally in CSS and limit the space of scroll
body: <p>I have some panel with some item. There will be logo + labels, arranged horizontally. If there is an overflow-x, there will appear a scroll bar. If I put just the labels, all elements are aligned. But if I insert the image, they are no longer vertically aligned. Why?</p>
  
  <p><strong>CSS</strong> code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
     font-family: "Open Sans", Helvetica, sans-serif; 
   color: #89867e;
   background: #f9f9f9;
  }
  .wrapper {
   margin: 20px;
   padding: 2em;
   list-style: none;
   font-size: 1.5em;
   font-weight: 300;
   max-height: 388px; 
   white-space: nowrap;
   overflow-y: hidden;
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch; 
      background-color: #ccc;
      margin-bottom:25px;
  }
  
  .internal {
    display: inline; 
   height: 164px;
   padding: .4em 1em; 
   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);
   color: rgba(249, 249, 249, .9);
   text-decoration: none;
   font-size: 1.5em;
   font-weight: 300;
   margin-right: 18px;
  }
   
  
  .wrapper a:nth-child(6n+1) { background: #e87352; }
  
  .wrapper a:nth-child(6n+2) { background: #ebc85e; }
  
  .wrapper a:nth-child(6n+3) { background: #3bbec0; }
  
  .wrapper a:nth-child(6n+4) { background: #4ad585; }
  
  .wrapper a:nth-child(6n+5) { background: rgb(27, 54, 71); }
  
  .wrapper a:nth-child(6n+6) { background: rgb(21, 40, 54); }
   
  
  .wrapper:nth-child(6n+1) { background: rgb(208, 101, 3); }
  
  .wrapper:nth-child(6n+2) { background: rgb(233, 147, 26); }
  
  .wrapper:nth-child(6n+3) { background: rgb(22, 145, 190); }
  
  .wrapper:nth-child(6n+4) { background: rgb(22, 107, 162); }
  
  .wrapper:nth-child(6n+5) { background: rgb(27, 54, 71); }
  
  .wrapper:nth-child(6n+6) { background: rgb(21, 40, 54); }
  
  .trasparente {
    background: transparent !important;
   padding: 0;
   border:none;
  }
  
  .logo {
   max-width: 318px;
   vertical-align: middle;
   margin-right: 18px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;a href="#" class="internal trasparente"&gt;&lt;img src="https://upload.wikimedia.org/wikipedia/bar/8/86/744px-Siemens-logo_svg.png" class="logo" style="margin-top:20px" alt="logo"&gt;&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 1&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 2&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 3&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 4&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 5&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 6&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 7&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 8&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 9&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 10&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 11&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 12&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 13&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 14&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 15&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 16&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 17&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 18&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 19&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 20&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 21&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 22&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 23&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 24&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 25&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 26&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 27&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 28&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 29&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 30&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="wrapper"&gt;
      &lt;a href="#" class="internal trasparente"&gt;&lt;img src="http://www.asborsoniww.com/media/tes_logo.png" class="logo" style="margin-top:20px" alt="logo"&gt;&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 1&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 2&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 3&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 4&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 5&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 6&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 7&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 8&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 9&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 10&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 11&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 12&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 13&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 14&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 15&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 16&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 17&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 18&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 19&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 20&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 21&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 22&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 23&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 24&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 25&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 26&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 27&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 28&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 29&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 30&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="wrapper"&gt;
    &lt;a href="" class="internal"&gt;item 1&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 2&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 3&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 4&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 5&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 6&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 7&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 8&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 9&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 10&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 11&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 12&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 13&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 14&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 15&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 16&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 17&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 18&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 19&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 20&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 21&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 22&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 23&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 24&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 25&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 26&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 27&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 28&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 29&lt;/a&gt;
    &lt;a href="" class="internal"&gt;item 30&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And there is the possibility to limit the length of the scroll-x, and add at the end of each panel "wrapper" (in the space just removed to the scroll) a right arrow (or any other elements)?</p>