CSS spacing issue in windows 8 horizontal design - html

Question

I have an issue with one of my designs.
I have created a design which is much like the windows 8 tiles, but there is an issue that arises sometimes.
The .row and .large-* sometimes have some mysterious gaps between the top of their containing elements.
There is no padding or margins anywhere that should be causing it, but it is happening.
I have made a fiddler example to show it in effect.
Please can someone have a look at it and tell me what I am doing wrong:
http://jsfiddle.net/34pk327u/
this is the HTML before it is rendered:
<div class="row">
<a class="back" href="/"><i class="fa fa-arrow-circle-left"></i></a>
<section class="large-4 columns">
<h1 class="column-title">Orders <small>quick search</small></h1>
<form name="orderFrom" role="form" ng-submit="customerServices.orderSearch()">
<div class="row collapse">
<div class="small-10 columns typeahead-icon">
<input type="text" ng-model="customerServices.searchTerm" placeholder="Search" typeahead="item for items in customerServices.autoComplete() | filter:$viewValue" typeahead-loading="customerServices.loading" typeahead-min-length="2">
<i ng-show="customerServices.loading" class="fa fa-spinner fa-spin"></i>
</div>
<div class="small-2 columns">
<button type="submit" class="button postfix">Go</button>
</div>
</div>
</form>
</section>
<section class="tile-column large-8 columns" tile-column>
<h1 class="column-title">Recent orders</h1>
<div class="loading" ajax-loader ng-show="customerServices.recent.loading"></div>
<div class="alert alert-box" ng-show="!customerServices.recent.loading && customerServices.recent.data.length === 0">
No records have been found that match your search.
×
</div>
<a class="tile large" ng-href="/customer-services/view-order/{{order.orderNumber}}" tile ng-repeat="order in customerServices.recent.data" id="{{order.orderNumber}}">
<div class="text">
<strong ng-bind="order.account.accountNumber"></strong> <span ng-bind="order.account.name"></span><br />
<span ng-bind="order.raisedBy"></span><br />
<span ng-bind="order.orderNumber"></span><br />
<span ng-bind="order.getDescription()"></span><br />
</div>
</a>
</section>
<section class="tile-column large-8 columns" tile-column>
<h1 class="column-title">Sync failures</h1>
<div class="loading" ajax-loader ng-show="customerServices.failures.loading"></div>
<div class="alert alert-box" ng-show="!customerServices.failures.loading && customerServices.failures.data.length === 0">
No records have been found that match your search.
×
</div>
<a class="tile large" ng-href="/customer-services/view-order/{{order.orderNumber}}" tile ng-repeat="order in customerServices.failures.data" id="{{order.orderNumber}}">
<div class="text">
<strong ng-bind="order.account.accountNumber"></strong> <span ng-bind="order.account.name"></span><br />
<span ng-bind="order.raisedBy"></span><br />
<span ng-bind="order.orderNumber"></span><br />
<span ng-bind="order.getDescription()"></span><br />
</div>
</a>
</section>
</div>
Update 1
I have updated the fiddle and added some borders so you can see the issue:
http://jsfiddle.net/34pk327u/2/
if you look at the quick search, it looks like it's 40px (ish) below the top of the row, but the other columns are in the right place.

Answer 1

I don't really understand what "mysterious gaps" you're referring to, but you can try adding padding: 0; to .row and .large-*