Center columns using Foundation 5

Question

I have a problem with center columns using Zurb Foundation 5. On the my test page it's not work correctly http://rsketchbook.o12.pl/test/ On the snippet it looks good. I don't know what's the difference, what's missing in my code. Could anyone tell me why it doesn't work on my test page?

$(document).foundation();

@font-face {
  font-family: 'Roboto Light';
  src: url('../fonts/RobotoLight.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto Regular';
  src: url('../fonts/RobotoRegular.woff2') format('woff2');
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Roboto Regular', sans-serif !important;
}
p,
em,
a {
  font-family: 'Roboto light', sans-serif !important;
}
@media only screen and (min-width: 58.75em) {
  body > header {
    background-image: url("https://static.pexels.com/photos/7217/landscape-mountains-clouds-trees.jpg");
    background-position: center center;
    height: 600px;
  }
  #nav-bar {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0% 0%;
    height: 84px;
    padding-top: 20px;
  }
  .line {
    height: 1px;
    background: white;
    transition: height 0.38s ease;
  }
  .menu-item:hover .line {
    height: 4px;
  }
  .menu-item:active .line {
    height: 4px;
  }
  .contain-to-grid,
  .top-bar,
  .top-bar-section ul li,
  .top-bar-section ul li:hover > a,
  .top-bar-section ul li:hover:not(.has-form) > a,
  .top-bar-section li:not(.has-form) a:not(.button),
  ul.right {
    background: none !important;
  }
  #right-nav > ul > li {
    padding-right: 25px;
  }
  .top-bar-section ul li a {
    padding: 0 !important;
  }
  #homepage-slogan {
    position: relative;
    padding-top: 260px;
  }
  #homepage-slogan h2 {
    font-size: 5em;
    font-weight: 700;
    line-height: 1.0;
  }
  #homepage-slogan hr {
    background: #000;
    border: none;
    height: 6px;
  }
  #homepage-slogan h2,
  #homepage-slogan p {
    color: #000;
    padding-right: 5rem;
  }
}
/* screen min-width: 58.75em  */

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation-essential/5.5.2/js/foundation.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation-essential/5.5.2/css/normalize.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation-essential/5.5.2/css/foundation.css" rel="stylesheet" />
<header>
  <div id="nav-bar" class="fixed">
    <div class="contain-to-grid">
      <nav class="top-bar" data-topbar role="navigation">
        <ul class="title-area">
          <li class="name">
            <h1><a href="#"><img src="#" alt="logo"></a></h1>

          </li>
          <li class="toggle-topbar menu-icon"><a href="#"><span></span></a>

          </li>
        </ul>
        <section id="right-nav" class="top-bar-section">
          <ul class="right">
            <li class="menu-item">
              <div class="line"></div> <a href="#">Lorem ipsum</a>

            </li>
            <li class="menu-item">
              <a href="#">
                <div class="line"></div>
                Lorem ipsum</a>

            </li>
            <li class="menu-item">
              <div class="line"></div> <a href="#">Lorem ipsum</a>

            </li>
            <li class="menu-item">
              <div class="line"></div> <a href="#">Lorem ipsum</a>

            </li>
            <li class="menu-item">
              <div class="line"></div> <a href="#">Lorem ipsum</a>

            </li>
          </ul>
        </section>
      </nav>
    </div>
  </div>
  <section id="homepage-slogan">
    <div class="row">
      <div class="large-15 columns right">
        <h2 class="text-right">Lorem<br>ipsum lorem</h2>

        <hr>
        <div class="large-14 columns right text-right">
          <p>test test test test test test test test test test test test test test test test</p>
        </div>
      </div>
    </div>
  </section>
</header>
<div class="row">
  <div class="medium-13 medium-centered columns">
    <div class="medium-6 columns">
      <h3>Center this part</h3>

      <p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
        <br>
        <br>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
        <br>
        <br>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
        <br>
        <br>
      </p>
    </div>
    <div class="medium-1 columns"></div>
    <div class="medium-6 columns end">
      <h3>And this in one row</h3>
      test test test test test test test test test test</div>
  </div>
</div>

Answer 1

2 Things -

Not sure it's 100% needed, but I always wrap by columns in a row div, so inside of your centered column, contain the 3 child columns in a row div.

Also, you are only using 13 of the available 15 columns inside the centered column, maybe change the child columns to medium-7 instead of medium-6?

EDIT -

<div class="row">
  <div class="medium-13 medium-centered columns">
<div class="row">
    <div class="medium-7 columns">
      <h3>Center this part</h3>

      <p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
        <br>
        <br>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
        <br>
        <br>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
        <br>
        <br>
      </p>
    </div>
    <div class="medium-1 columns"></div>
    <div class="medium-7 columns end">
      <h3>And this in one row</h3>
      test test test test test test test test test test</div>
</div>
  </div>
</div>