Css 将图元与网格对齐

我正在使用基金会构建一个新网站

我想要的是对齐红色边框的元素，您可以从屏幕上看到。我做错了什么？少了什么

HTML:

---

要对齐网格元素，请在包含3列的div中添加一个id

id=“grid”

，并添加20px的边距。或者玩弄不同的值。希望有帮助！

<!-- ***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>

/* **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;
}