On our subscriptions Website I am using Bootstrap 3 grid ("<div class="col-xs-6 col-sm-4 col-md-2" id="col_01">image</div>") to display our magazines. The list is populated and filtered (by category) through our database entries. So all the latest mags which are available for sale are listed. Right now i am listing all the mags inside a single "row" div. Say some 50 to 55 mags("<div class="row"><div class="col-xs-6 col-sm-4 col-md-2" id="col_01">image</div> to <div class="col-xs-6 col-sm-4 col-md-2" id="col_55">image</div></div>").

What i am doing is, displaying an overlay div on each mag's click. The overlay div is 200% wide and have some options listed. User will select some options and click "subscribe" and the mag shows a selected sign + the overlay div is closed. All these are done and working. Except the sixth item. When the sixth item (last in the row) is clicked my overlay div is exceeding the container div's right margin. I want this to stay inside or be positioned inside. How do we obtain this? This has to happen in different media/screens as well.

Please suggest.