section no toma full height

[JuJoGuAl]

Buenas amigos, estoy diseñando un sitio y trato de hacerlo Responsive, el problema es que el SECTION cuya clase es MAIN no me toma el FULL HEIGHT a pesar que el BODY y HTML lo tienen declarado

Dentro de SECTION coloque ARTICULE, puesto que manejare "secciones" en el Body, y como se me pidio que se viera en Columnas les adiccione una classe llamada COL

Css:

Código CSS:

html, body
{
    height: 100%;
}
.main { 
  background: url("img/bg.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: block;
  height: 100%;
  margin: 0;
  /*min-height: 784px;  */
  padding: 0.5em;
}
.main .articulo {
  background: #fff;
  box-shadow: 5px 5px 20px rgba(20,24,44,0.8);
  color: #000;
  display: block;
  margin-bottom: 2em;
  padding-bottom: 1em;
  text-align: center;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}
.main .articulo h2 {
  font-size: 1.5em;
}
.main .articulo p {
  font-size: 1em;
  line-height: 0.5em;
}
.col{
  width: 40%;
  float: left;
  margin: 50px;
}
@media screen and (max-width:1030px) {  
    .col{
    width: 100%;
    margin: 0px;
    margin-top: 20px;
  }
}
 

HTML

Código HTML:

<section class="main">          
            <article class="articulo col">
                <h2 class="subtit">Trade Consulting</h2>
                <p class="texto">
                    <p>Search and selection of suppliers</p>
                    <p>Sample check</p>
                    <p>Purchase order management</p>
                    <p>Payment management</p>                    
                </p>
            </article>
            <article class="articulo  col">
                <h2 class="subtit">Quality Control & Factory Audit</h2>
                <p class="texto">
                    <p>Sample Check</p>
                    <p>Laboratory Testing</p>
                    <p>Production Audit</p>
                    <p>Post production inspection</p>
                    <p>Pre-shipment inspection</p>
                    <p>Container loading supervision</p>
                    <p>Health & Safety Standards Audit</p>
                </p>
            </article>
            <article class="articulo col">
                <h2 class="subtit">Logistic Consulting</h2>
                <p class="texto">
                    <p>Cargo Insurance</p>
                    <p>Import and export documentation</p>
                    <p>Door to Door service</p>
                    <p>Port to Port service</p>
                    <p>Cargo tracking</p>
                </p>
            </article>
            <article class="articulo col">
                <h2 class="subtit">Investment Opportunities</h2>
                <p class="texto">
                    <p>New Products</p>
                    <p>New Ideas</p>                    
                </p>
            </article>
        </section>
 

Cuando se hace ZOOM para probar como se vera en diferentes pantallas los ARTICULE se salen del SECTION o este no llena todo el body, realmente no se que esta pasando :(

Para verlo en vivo (services)

http://jujogual.esy.es/