Menu icon Foundation
Offset in full width container not aligned

I made a full width container and give offset-1. However it did not aligned with a non full width container below.

 

Why is that, or how should i align?

 

Html

  <div class="row expanded hero align-center">
    <div class="large-11 large-offset-1 column content">
      <h1>Title</h1>
    </div>
  </div>
  <div class="row">
    <div class="large-11 large-offset-1 column">
      <h1>Title</h1>
    </div>
  </div>

CSS

.hero{
    background-color: #ddeedd;
}

.content {
    max-width: 62.5rem;
}

 

flex-grid

I made a full width container and give offset-1. However it did not aligned with a non full width container below.

 

Why is that, or how should i align?

 

Html

  <div class="row expanded hero align-center">
    <div class="large-11 large-offset-1 column content">
      <h1>Title</h1>
    </div>
  </div>
  <div class="row">
    <div class="large-11 large-offset-1 column">
      <h1>Title</h1>
    </div>
  </div>

CSS

.hero{
    background-color: #ddeedd;
}

.content {
    max-width: 62.5rem;
}