Phantom top margin on float left - html

Question

I'm having a little trouble with floating my elements. I have some phantom margin that has appeared on my 3rd col element; as seen in the image below;
I have tried adding; box-sizing: border-box; but this doesn't help either. Is there something I am missing?
Code
#f-wrap {
position: relative;
width:100%;
margin: 0 auto;
}
.row {
display: inline-block;
width: 100%;
}
.col {
display: inline-block;
float: left;
width: 45%;
margin: 2em 1em;
background: #f0f;
}
<section class="ctre s-f">
<div id="t-wrap">
<div class="row">
<div class="col">
<img src="img-bin/mgi-logo.png" alt="MGI Technology logo." width="20%"/>
</div>
<div class="col">
<h3 class="f-h">Related Links</h3><br/>
<ul>
<li class="f-lnk">Home</li>
<li class="f-lnk">About us</li>
<li class="f-lnk">Products</li>
<li class="f-lnk">News</li>
<li class="f-lnk">Contact us</li>
<li class="f-lnk">Recycle</li>
<li class="f-lnk">Site map</li>
</ul>
</div>
</div>
<hr class="style-two"/>
<div class="row">
<div class="col">
<h3 class="f-h">Social</h3><br/>
<ul>
<li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
<li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
<li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
</ul>
</div>
<div class="col f-txt">
<h3 class="f-h">Find Us</h3><br/>
MGI Technology<br/>
<br/>
MAP
</div>
</div>
</div>
</section>
Any assistance I can get with this would be greatly appreciated...
Update: Have now tried vertical-align:top; and removed float:left. Issue persists.
Temporary Live Example

Answer 1

your snippet is not showing any issue but anyhow, but it seems that's due to by default inline-block is vertical-align:baseline, so you must set to vertical-align:top
plus remove unnecessary float:left
#f-wrap {
position: relative;
width:100%;
margin: 0 auto;
}
.row {
display: inline-block;
vertical-align:top;
width: 100%;
}
.col {
display: inline-block;
vertical-align:top;
width: 45%;
margin: 2em 1em;
background: #f0f;
}
<section class="ctre s-f">
<div id="t-wrap">
<div class="row">
<div class="col">
<img src="img-bin/mgi-logo.png" alt="MGI Technology logo." width="20%"/>
</div>
<div class="col">
<h3 class="f-h">Related Links</h3><br/>
<ul>
<li class="f-lnk">Home</li>
<li class="f-lnk">About us</li>
<li class="f-lnk">Products</li>
<li class="f-lnk">News</li>
<li class="f-lnk">Contact us</li>
<li class="f-lnk">Recycle</li>
<li class="f-lnk">Site map</li>
</ul>
</div>
</div>
<hr class="style-two"/>
<div class="row">
<div class="col">
<h3 class="f-h">Social</h3><br/>
<ul>
<li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
<li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
<li class="f-ico"><img src="img-bin/mgi-logo.png" alt="" width="100%" /></li>
</ul>
</div>
<div class="col f-txt">
<h3 class="f-h">Find Us</h3><br/>
MGI Technology<br/>
<br/>
MAP
</div>
</div>
</div>
</section>
UPDATE:
Looking at your live site, the issue is that the other col has another class f-txt which has a property font-size:8pt and with that, change the height of the column.
So either you apply the same class to the first .col or remove that property