Why isn't the section height property (by percent value) working and how can I achieve this?

Question

I'm making a fake news article for a site and I floated the news sections, but I noticed that the bottom borders on the left and the right aren't aligned. I tried to fix this by placing the <h1> and the <p> elements in sections and making the section { height: 45%; } but it didn't work.

Why isn't it working and how can I align the borders? I have the HTML here.

html{
    margin: auto;
    font-size: 1em;
    padding: 0;
    max-width: 100%;
    text-align: center;
}
figure{
    margin: auto;
    max-width: 50%;
}
img{
    display: block;
}
img, body, ul{
    max-width: 100%;
    margin: auto;
    padding: 0;
}
.caption-clr{
    background-color: rgba(0,0,0,.1);
}

*{box-sizing: border-box;}

.main-wrapper{
    padding: 2.5% 10%;
    max-width: 100%;
    margin:  0 10%;
}
body,.main-wrapper{
    background-color: lightgreen;
}
header {
    color: white;
    text-shadow: 1px 0px 5px rgb(0,0,1);
    max-width: 100%;
    margin: auto;
    background-image: url(../img/cannabis.jpg);
    padding: 10%;
    background-size: cover;
    background-position: top;
 }
p{
    border-bottom: 1px solid rgba(0,0,0,.1);
    padding: 0 0 5px 0;
}
.opening-list li{
    font-weight: bold;
    list-style: none;
}
.opening-list{
    margin: 0 0 5px 0;
}
.opening-list li,.opening-list h3{
    color: white;
}

/responsive/

@media screen and (min-width: 550px){
   section {
      height: 45%;
   }
   body{
      background-color: lightgrey;
   }
   .first-right-section{
      float: right;
      margin: 2.5%;
      width: 45%;
   }
   .first-left-section{
      width: 45%;
      margin: 2.5%;
      float: left;
   }
   .clear{
      clear: both;
   }
}