将元素与网格对齐

Question

我正在使用基金会

建立新网站http://ba-test.nowcommu.myhostpoint.ch/antonio/

我想要的是对齐红色边框元素，如您在屏幕上看到的那样。我做错了什么？缺少什么？

HTML：

<!-- ***START CONTENT*** -->
<div class="row">
   <div class="large-3 columns logo">
      <img src="img/logo_BA.png" />
   </div>
</div>
<div class="row">
   <div class="large-12 columns navbar">
      <div class="magellan-container" style="background-color:#fff !important;" data-magellan-expedition="fixed" data-options="destination_threshold:65;throttle_delay:0;" >
         <dl class="sub-nav">
            <dd data-magellan-arrival="home"><a href="#home">Home</a></dd>
            <dd data-magellan-arrival="architektur"><a href="#architektur">Architektur</a></dd>
            <dd data-magellan-arrival="lage"><a href="#lage">Lage</a></dd>
            <dd data-magellan-arrival="wohnungen"><a href="#wohnungen">Wohnungen</a></dd>
            <dd data-magellan-arrival="galerie"><a href="#galerie">Galerie</a></dd>
            <dd data-magellan-arrival="kontakt"><a href="#kontakt">Kontakt</a></dd>
            <dd data-magellan-arrival="impressum"><a href="#impressum">Impressum</a></dd>
         </dl>
      </div>
   </div>
</div>
<div class="row">
   <div class="large-12 columns slider">
      <img src="img/slider1.png" width="1529" height="893" />
   </div>
</div>
<div class="row homerow" style="background-image: url('img/bg_section.png'); background-size: 100%;">
   <div class="large-4 columns">
      <h1 class="home">Architektur</h1>
      <h2 class="subtitle">Lorem Ipsum. Proin<br>gravida nibh.</h2>
      <p class="testo-home">vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum.</p>
   </div>
   <div class="large-4 columns">
      <h1 class="home">Lage</h1>
      <h2 class="subtitle">Lorem Ipsum. Proin<br>gravida nibh</h2>
      <p class="testo-home">vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum.</p>
   </div>
   <div class="large-4 columns">
      <h1 class="home">Wohnungen</h1>
   </div>
   <h2 class="subtitle">Lorem Ipsum. Proin<br>gravida nibh</h2>
   <p class="testo-home">vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum.</p>
   <div class="large12 columns">
      <img src="img/place.jpg" />
   </div>
</div>

CSS：

/* **GENERAL STYLES** */

body {
  background-color: #efe7d6;
  padding-top: 15px;
}

h1 {
  color: #009ee0;
  text-indent: left;
}

h2 {
  font-weight: 100;
  font-size: 1.5em;
}

/* END GENERAL STYLES */

.logo {
  float: right !important;
  height: 100%;
  padding-bottom: 20px;
}

.navbar {
  padding-bottom: 20px;
}

.home {
  font-size: 1.2em;
  text-transform: uppercase;
  text-align: center;
}

.row.homerow {
  padding-top: 15px;
}

.subtitle {
  text-align: center;
}

.testo-home {
  font-size: 0.785em;
  text-align: center;
}