Image Gallery alignment issue
<p>Can someone help me with the following image gallery ? <a href="https://i.stack.imgur.com/jDoR8.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/jDoR8.jpg" alt="enter image description here"></a></p>

<p>I am trying to align all items inside a container with width 940px and the gallery div is 740 but I cannot figure out the technique and do it properly. May I ask some of you who are more experienced to explain to me how to structure the code and do it in proper way ? </p>

<p>Here is my code until this moment but almost everything is broken...</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {  position: relative;  width: 940px; margin: 0 auto; }
.main { background: #f1f1e6; position: relative; }
.sidebar { display: block; width: 182px; float: left; padding: 41px 10px 10px 19px; }
.content { background: #fff; float: left; max-width: 740px; margin-top: 21px; overflow: hidden; box-shadow: 0 0 10px #99997a; }
.cf-me { clear: both; }

/* Content CSS Styles */

.sort-container { position: relative; left: 42.5%; }
.sort-items { position: relative; float: left; margin-top: 52px;  }
.sort-items p { float: left; padding: 0 4px; }
.filter-products { position: absolute; left: 100%; font-size: 12px; line-height: 18px; color: #666651; background: #f2f2e7; border: 1px solid #e6e6cf; border-radius: 1px; padding: 2px 0; width: 160px; }

.product-label { display: block; float: left;  }
.product-label h1 { position: relative; font-family: "Arial", sans-serif; font-size: 12px; font-weight: bold; padding: 15px 10px 16px 20px; }
.product-label h1:after { content:''; position: absolute; top: 0; border-bottom: 1px solid #e6e6cf;  } 
.product-label p { padding: 0 5px 15px 20px; }

.product-list { clear: both; }
.product-list ul { margin-right: -240px; }
.product-list ul li { list-style: none; float: left; width: 144px; margin: 0 48px 7px 50px; }
.product-list ul li img { max-width: 100%; height: auto; }
.product-list ul li a { color: #fff; }
.product-list ul li a:hover { opacity: 0.8; }

.btn { background: url(../images/btn-image.jpg) 0 0 no-repeat; }
.add-to-cart { font-family: "Arial", sans-serif; font-size: 14px; font-weight: bold; text-decoration: none; padding: 9px 33px 10px 9px; }

.left-arrow { float: left; width: 24px; height: 126px; }
.left-arrow a { display: block; height: 100%; background: url(../images/arrow.png) no-repeat 0 0; font-size: 0; line-height: 0; font-style: normal; overflow: hidden; text-indent: -100%; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;main class="main"&gt;
 &lt;div class="paper-border"&gt;&lt;/div&gt;
  &lt;div class="container"&gt;
   &lt;aside class="sidebar"&gt;
    
   &lt;/aside&gt;&lt;!-- sidebar --&gt;
   &lt;div class="content"&gt;
    &lt;div class="product-label"&gt;
     &lt;h1&gt;Products &gt; Category Page&lt;/h1&gt;
     &lt;p&gt;Displaying 1-12 of 30 Product(s)&lt;/p&gt;
    &lt;/div&gt;&lt;!-- product-label --&gt;
    &lt;div class="sort-container"&gt;
     &lt;div class="sort-items"&gt;
      &lt;p&gt;Sort By:&lt;/p&gt;
      &lt;select class="filter-products"&gt;
       &lt;option value="default" selected&gt;Default&lt;/option&gt;
       &lt;option value="product_1"&gt;Product 1&lt;/option&gt;
       &lt;option value="product_2"&gt;Product 2&lt;/option&gt;
       &lt;option value="product_3"&gt;Product 3&lt;/option&gt;
      &lt;/select&gt;&lt;!-- filter-products --&gt;
     &lt;/div&gt;&lt;!-- sort-items --&gt;
    &lt;/div&gt;
    &lt;div class="product-list"&gt;
     &lt;ul&gt;
      &lt;li&gt;
       &lt;div class="left-arrow"&gt;
        &lt;a href="#"&gt;left arrow&lt;/a&gt;
       &lt;/div&gt;
       &lt;div class="item"&gt;
        &lt;a href="#" class="image"&gt;&lt;img src="images/product_1.jpg" width="110" height="121" title="someText" alt="someText"&gt;&lt;/a&gt;
        &lt;p class="title"&gt;Product Title&lt;br&gt;Placeholder&lt;/p&gt;
        &lt;!-- /.title --&gt;
        &lt;p class="price"&gt;&amp;dollar;99.99&lt;/p&gt;&lt;!-- /.price --&gt;
        &lt;a href="#" class="btn add-to-cart"&gt;Add to Cart&lt;/a&gt;
       &lt;/div&gt;&lt;!-- /.item --&gt;
      &lt;/li&gt;
      &lt;li&gt;
       &lt;div class="item"&gt;
        &lt;a href="#" class="image"&gt;&lt;img src="images/product_2.jpg" width="138" height="87" title="someText" alt="someText"&gt;&lt;/a&gt;
        &lt;p class="title"&gt;Product Title&lt;br&gt;Placeholder&lt;/p&gt;
        &lt;!-- /.title --&gt;
        &lt;p class="price"&gt;&amp;dollar;99.99&lt;/p&gt;&lt;!-- /.price --&gt;
        &lt;a href="#" class="btn add-to-cart"&gt;Add to Cart&lt;/a&gt;
       &lt;/div&gt;&lt;!-- /.item --&gt;
      &lt;/li&gt;
      &lt;li&gt;
       &lt;div class="item"&gt;
        &lt;a href="#" class="image"&gt;&lt;img src="images/product_3.jpg" width="139" height="87" title="someText" alt="someText"&gt;&lt;/a&gt;
        &lt;p class="title"&gt;Product Title&lt;br&gt;Placeholder&lt;/p&gt;
        &lt;!-- /.title --&gt;
        &lt;p class="price"&gt;&amp;dollar;99.99&lt;/p&gt;&lt;!-- /.price --&gt;
        &lt;a href="#" class="btn add-to-cart"&gt;Add to Cart&lt;/a&gt;
       &lt;/div&gt;&lt;!-- /.item --&gt;
      &lt;/li&gt;
      &lt;li&gt;
       &lt;div class="item"&gt;
        &lt;a href="#" class="image"&gt;&lt;img src="images/product_4.jpg" width="160" height="160" title="someText" alt="someText"&gt;&lt;/a&gt;
        &lt;p class="title"&gt;Product Title&lt;br&gt;Placeholder&lt;/p&gt;
        &lt;!-- /.title --&gt;
        &lt;p class="price"&gt;&amp;dollar;99.99&lt;/p&gt;&lt;!-- /.price --&gt;
        &lt;a href="#" class="btn add-to-cart"&gt;Add to Cart&lt;/a&gt;
       &lt;/div&gt;&lt;!-- /.item --&gt;
      &lt;/li&gt;
      &lt;li&gt;
       &lt;div class="left-arrow"&gt;
        &lt;a href="#"&gt;left arrow&lt;/a&gt;
       &lt;/div&gt;
       &lt;div class="item"&gt;
        &lt;a href="#" class="image"&gt;&lt;img src="images/product_5.jpg" width="123" height="136" title="someText" alt="someText"&gt;&lt;/a&gt;
        &lt;p class="title"&gt;Product Title&lt;br&gt;Placeholder&lt;/p&gt;
        &lt;!-- /.title --&gt;
        &lt;p class="price"&gt;&amp;dollar;99.99&lt;/p&gt;&lt;!-- /.price --&gt;
        &lt;a href="#" class="btn add-to-cart"&gt;Add to Cart&lt;/a&gt;
       &lt;/div&gt;&lt;!-- /.item --&gt;
      &lt;/li&gt;
      &lt;li&gt;
       &lt;div class="item"&gt;
        &lt;a href="#" class="image"&gt;&lt;img src="images/product_6.jpg" width="114" height="138" title="someText" alt="someText"&gt;&lt;/a&gt;
        &lt;p class="title"&gt;Product Title&lt;br&gt;Placeholder&lt;/p&gt;
        &lt;!-- /.title --&gt;
        &lt;p class="price"&gt;&amp;dollar;99.99&lt;/p&gt;&lt;!-- /.price --&gt;
        &lt;a href="#" class="btn add-to-cart"&gt;Add to Cart&lt;/a&gt;
       &lt;/div&gt;&lt;!-- /.item --&gt;
      &lt;/li&gt;
      &lt;li&gt;
       &lt;div class="item"&gt;
        &lt;a href="#" class="image"&gt;&lt;img src="images/product_7.jpg" width="127" height="133" title="someText" alt="someText"&gt;&lt;/a&gt;
        &lt;p class="title"&gt;Product Title&lt;br&gt;Placeholder&lt;/p&gt;
        &lt;!-- /.title --&gt;
        &lt;p class="price"&gt;&amp;dollar;99.99&lt;/p&gt;&lt;!-- /.price --&gt;
        &lt;a href="#" class="btn add-to-cart"&gt;Add to Cart&lt;/a&gt;
       &lt;/div&gt;&lt;!-- /.item --&gt;
      &lt;/li&gt;
      &lt;li&gt;
       &lt;div class="item"&gt;
        &lt;a href="#" class="image"&gt;&lt;img src="images/product_8.jpg" width="123" height="135" title="someText" alt="someText"&gt;&lt;/a&gt;
        &lt;p class="title"Product Title&lt;br&gt;Placeholder&lt;/p&gt;
        &lt;!-- /.title --&gt;
        &lt;p class="price"&gt;&amp;dollar;99.99&lt;/p&gt;&lt;!-- /.price --&gt;
        &lt;a href="#" class="btn add-to-cart"&gt;Add to Cart&lt;/a&gt;
       &lt;/div&gt;&lt;!-- /.item --&gt;
      &lt;/li&gt;
      &lt;li class="cf-me"&gt;
       &lt;div class="left-arrow"&gt;
        &lt;a href="#"&gt;left arrow&lt;/a&gt;
       &lt;/div&gt;
       &lt;div class="item"&gt;
        &lt;a href="#" class="image"&gt;&lt;img src="images/product_9.jpg" width="142" height="135" title="someText" alt="someText"&gt;&lt;/a&gt;
        &lt;p class="title"&gt;Product Title&lt;br&gt;Placeholder&lt;/p&gt;
        &lt;!-- /.title --&gt;
        &lt;p class="price"&gt;&amp;dollar;99.99&lt;/p&gt;&lt;!-- /.price --&gt;
        &lt;a href="#" class="btn add-to-cart"&gt;Add to Cart&lt;/a&gt;
       &lt;/div&gt;&lt;!-- /.item --&gt;
      &lt;/li&gt;
      &lt;li&gt;
       &lt;div class="item"&gt;
        &lt;a href="#" class="image"&gt;&lt;img src="images/product_10.jpg" width="75" height="140" title="someText" alt="someText"&gt;&lt;/a&gt;
        &lt;p class="title"&gt;Product Title&lt;br&gt;Placeholder&lt;/p&gt;
        &lt;!-- /.title --&gt;
        &lt;p class="price"&gt;&amp;dollar;99.99&lt;/p&gt;&lt;!-- /.price --&gt;
        &lt;a href="#" class="btn add-to-cart"&gt;Add to Cart&lt;/a&gt;
       &lt;/div&gt;&lt;!-- /.item --&gt;
      &lt;/li&gt;
      &lt;li&gt;
       &lt;div class="item"&gt;
        &lt;a href="#" class="image"&gt;&lt;img src="images/product_11.jpg" width="75" height="129" title="someText" alt="someText"&gt;&lt;/a&gt;
        &lt;p class="title"&gt;Product Title&lt;br&gt;Placeholder&lt;/p&gt;
        &lt;!-- /.title --&gt;
        &lt;p class="price"&gt;&amp;dollar;99.99&lt;/p&gt;&lt;!-- /.price --&gt;
        &lt;a href="#" class="btn add-to-cart"&gt;Add to Cart&lt;/a&gt;
       &lt;/div&gt;&lt;!-- /.item --&gt;
      &lt;/li&gt;
      &lt;li&gt;
       &lt;div class="item"&gt;
        &lt;a href="#" class="image"&gt;&lt;img src="images/product_12.jpg" width="136" height="122" title="someText" alt="someText"&gt;&lt;/a&gt;
        &lt;p class="title"&gt;Product Title&lt;br&gt;Placeholder&lt;/p&gt;
        &lt;!-- /.title --&gt;
        &lt;p class="price"&gt;&amp;dollar;99.99&lt;/p&gt;&lt;!-- /.price --&gt;
        &lt;a href="#" class="btn add-to-cart"&gt;Add to Cart&lt;/a&gt;
       &lt;/div&gt;&lt;!-- /.item --&gt;
      &lt;/li&gt;
     &lt;/ul&gt;
   &lt;/div&gt;&lt;!-- content --&gt;
  &lt;/div&gt;&lt;!-- container --&gt;</code></pre>
</div>
</div>
</p>