title: Align 2 columns to a container
body: <p>I have a template that I am modifying to my liking. It is a container (blue) with no margin or padding, and inside a loop in which shows the products (red). I want to show 2 products per line, with a width of 49% and a space or margin of 2% so that everything is 100% wide (49 + 2 + 49 = 100). The problem is that if I add margin it is not aligned. What forms are there to do this? </p>
  
  <p>UPDATE:</p>
  
  <p>The container (blue) is inside another container that is float. Not only do I have 2 products (red), it is a dump of 20 products per page.</p>
  
  <p>I want the products on the left side of the container (product1, product3, product5 ...) to be aligned to the left of the div.container. The products on the right side (product2, product4, product6 ...) are aligned to the right of the div.container and between them there is a margin or space.</p>
  
  <p><img src="https://i.imgur.com/7nBSaXY.png" alt=""></p>