Q:

How to display line items in twos?

I have this site:
link
At the bottom you will find the footer which has 7 items (printing, textile, photo, advertising, gastronomy, about us, contact).
Currently all these elements are in line this shape
Printing-Textile-Photo-Advertising-Gastronomy-About US-Contact

I want to do so
Printing-Textile
Photo-Advertising
Gastronomy-About US
Contact

CODE HTML
<div class="site-info container">
    <div class="footer-blocks">
          //some code HTML
    </div>
    <div class="footer-blocks">
          //some code HTML
    </div>
    <div class="footer-blocks">
          //some code HTML
    </div>
    <div class="footer-blocks">
         //some code HTML
    </div>
    <div class="footer-blocks">
         //some code HTML
    </div>
    <div class="footer-blocks">
         //some code HTML
    </div>
    <div class="footer-blocks">
         //some code HTML
    </div>
</div>

CODE CSS:
.footer-blocks{
  float:left;
  width:12%;
  color:#fff;
  margin-right:2%;
  text-align:left;
}
.footer-blocks:last-child{
  margin-right:0;
}

I tried to modify the CSS code and got it form
<div class="site-info container">
        <div class="footer-blocks" style="float:left">
              //some code HTML
        </div>
        <div class="footer-blocks" style="float:left">
              //some code HTML
        </div>
        <div class="footer-blocks" style="float:left">
              //some code HTML
        </div>
        <div class="footer-blocks">
             //some code HTML
        </div>
        <div class="footer-blocks">
             //some code HTML
        </div>
        <div class="footer-blocks">
             //some code HTML
        </div>
        <div class="footer-blocks">
             //some code HTML
        </div>
    </div>

CODE CSS NEW:
.footer-blocks{
  width:12%;
  color:#fff;
  margin-right:2%;
  text-align:left;
}

I know it is not good what we tried but I do not figure out how I could arrange them as they wish.
Probably something simple but I do not know how to fix it.
Could you please help me?
Thanks in advance!

A:

Set the width to 48% for the blocks and min-height will give it equal area in vertical direction. If you need to limit the spacing between the columns, set a fixed width for the parent element.
.site-info.container {
  width: 500px; /* Add */
}
.footer-blocks {
  color: #fff;
  float: left;
  margin-right: 2%;
  min-height: 330px; /* Add */
  text-align: left;
  width: 48%; /* Add */
}

Output:

