Zurb Foundation Image and text frames, issues with centering and nav-bar max-width

I've been putting this site together, and the series of six images (graphic1.jpg, graphic2.jpg etc) I would like to put into a sort of frame, like the attached image, so that the text always stays under the image, even on mobile if the images were squeezed down single file, and also to give some visual clarity to which bit of text goes to what image.

enter image description here

I'm also having trouble with the two buttons at the bottom of the page centering, despite the fact that I'm using the center code.

Also, is there a resource I can be pointed to to set the width of the nav-bar to a maximum, so that the site can have edges and a background behind/outside of that? I think there's something up with my code there.

Thanks for any help you can provide!

Brookes

<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tribal Droid Studio</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <script src="js/vendor/modernizr.js"></script>
  </head>

  <body>
    <div class="twelve columns centered">
          <nav class="top-bar">

            <ul class="title-area">
                <li class="name"><h1><a href="index.html">Tribal Droid Studio</a></h1></li>
            </ul>

                <section class="top-bar-section">

                    <ul class="right">

                        <li><a href="#">Visual Development</a></li>
                        <li><a href="#">Sign Work</a></li>
                        <li><a href="#">Our Process</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">About Tribal Droid</a></li>
                    </ul>

                </section>

    </nav>

    <div class="row">

    <div class="row">
        <div class="large-5 columns">

        <h2>Tribal Droid Studio</h2>
        <p> asdf asd fasdfasdf asfghwgreqtrgafdbsfgqeth asdf gqfad </p>

    </div>

    <div class="large-7 columns">

    </div>

    <div class="large-12 columns">

        <img src="img/tribalhead3.jpg"/>

    </div>

    <hr />

    <div class="row">


        <h2>Why Tribal Droid Studio?</h2>

        <div class="large-12 columns">

            <ul class="large-block-grid-3">

                        <li><img src="img/graphic1.jpg" />Graphic Design, Logo Design, and     Branding all go into creating a visual identity.</li>
                </panel>


                <li><img src="img/graphic2.jpg" />But it can be hard to get noticed in a sea of things demanding attention.</li>


                <li><img src="img/graphic3.jpg" />You may find developing one of your own to be lacking in professionalism or soul.</li>


                <li><img src="img/graphic4.jpg" />At the heart of your visual identity is a story.</li>

                <li><img src="img/graphic5.jpg" />Tribal Droid Studio is a team of artists and storytellers determined to turn your visions into visuals.</li>

                <li><img src="img/graphic6.jpg" />Once your identity is ready, we have the signmaking tools and experience to bring it to life.</li>     
        </div>

        <div class="row">

                <divclass="small-8 small-centered columns">

        <a class="button round"="contact.html">Contact us to get started!</a>
        <a class="button round"="#">View our gallery of work</a>
                </div>
        </div>

        <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
                          $('.your-class').slick({
                                                 setting-name: setting-value
                                                 });
                          });

    </script>

    <script>
      $(document).foundation();
    </script>
  </body>
</html>

![what I'd like the images and text to do together (font unimportant)][1]

Solution

First I'd go through and check your syntax... <divclass="small-8... is invalid. This can cause a break in the layout. Also... check your divs with "row" classes as it seems there are a lot of extras in this example...

I count 9 open <div> tags and only 6 close /div> tags...

For your image issues, set up some sort of css for the images to position them as you need, and then place that image, and the text for it, within a block element on the page. Right now your text is free to flow within the <li> tag and the image is free to float as well. Without some sort of container around them you are going to get separation.