两个响应div之间的间距

Question

新手在这里。我正在尝试将地图和一些文本放在彼此旁边，这些文本将在响应模式下堆叠。

我想要实现的目标：www​​.visitessex.com/thedms.aspx?dms=3&venue=0486563请查看“位置”和“路线”。

我做了什么：http://jsfiddle.net/qs3frhb5/

<div style="width: 100%;">
<div class="inner"> Left </div>
<div class="inner"> Right </div>
</div>

.inner{
outline: 1px solid #333;
float: left;
width: 100%;
}

@media (min-width:500px){
.inner{
    width: 50%;
}

我在SO上找到的片段实际效果很好，但我遇到了一些问题。在桌面上一切都很好 - 地图和文本彼此相邻，两者之间有很大的间距。

然而，在ipad上，地图和文字紧挨着，两者之间几乎没有间距，使它看起来有些奇怪。

如果有人能指出我正确的方向，我会很感激。基本上我喜欢这两个div在并排堆叠时总是有一点空间。根据我的有限理解，我认为这是一个填充或宽度问题，但无法弄清楚该怎么做。