Foundation 5 css in rails app only covering half the page

Question

I'm building a personal website with Ruby on Rails and the Foundation5 framework.

The issue is that my columns only extend to half the page on my browser. The top section and header are fine, but the columns underneath only extend to half the page-width.

I feel like there's a simple fix somewhere and most likely I'm missing something glaringly obvious. Here's my view code:

<div id="container">
    <div class="parallax-background">
      <div class="intro-text">
        Welcome to Nico's Site
        <p><i class="fi-arrow-down"></i></p>
      </div>
    </div>
    <div class="parallax-content">
        <div class="wrapper">
            <div class="row">
                <div class="small-12 large-12 columns" align="center">
                My Resume
                </div>
            </div>
        </div>
        <div class="wrapper">
            <div class="row">
                    <div class="small-4 large-4 columns" align="left">
                     <p>Hi! My name is Nick. I'm a 28 year old Software Engineering student from Ottawa, Ontario. I love building things, and learning. This is me playing around with Foundation 5 and Ruby on Rails. Lets see if I can figure out some cool stuff!</p>
                    </div>
                  <div class="small-4 large-4 columns" align="center"><p>I'll be adding blog posts about things that pique my interest on any given day. Right now, I'm all about programming and Texas Hold'em Poker. At the time of me writing this, I have three programming projects ongoing (including this one), am starting to play in Casino Texas Holdem tournaments, am trying to shed 10 to 15 pounds, and, on top of all that, its the holidays!</p></div>
                  <div class="small-4 large-4 columns" align="right"><p>What I'd really, really like to do here is showcase my programming projects. Each one should have a section and link to either its deployed version, or link to the Apple App store so you can download it. All feedback is welcome!</p></div>
            </div>
        </div>
    </div>
</div>

The classes for my columns are "small-4 large-4 columns", and I have 3 of them, so I expected it to stretch the width of the screen (Foundation5 is a 12 column grid, I think?). But it's only extending to half the page. Can anyone help me fix it/tell me what's up?

Thanks guys!

edit - here's my main.css.scss file as well, maybe something in parallax-content, but I don't see anything there?

    //footer css

  .full-width {
  max-width: 1400px;
}

.footer {
  position: absolute;
  bottom: 0;
  background-color: #2980b9;
  padding: 2rem 4rem;
  text-align: center;
  color: #fff;
}
.footer i {
  font-size: 100px;
}

.footer h4 {
  color: #fff;
  font-size: 1em;
  font-weight: 400;
  text-transform: uppercase;
  margin-top: 2.5rem;
  margin-bottom: 10px;
}
.footer p, .footer a {
  font-weight: 300;
  font-size: .8em;
  color: #fff;
}

@media only screen and (min-width: 40.063em) {
  .footer .columns:nth-child(n+2) {
    border-left: 1px solid #b3b3b3;
    min-height: 280px;
  }
}
.footer-links {
  list-style-type: none;
}
.footer-links li {
  margin-top: .5em;
}

//parallax css

body {
    font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !important;
    font-weight: 200;
    font-size: 20px;
}

.parallax-background {
    background: url("Banff_Fireball.jpg") no-repeat center center fixed;
    // background-color: #0078A0;
    height: 620px;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: fixed;
    width: 100% !important;
    z-index: 0;
}

.intro-text {
    font-size: 50px;
    color: #fff;
    text-align: center;
    margin-top: 15%;
}
.parallax-content {
    max-width: 100%;
    position: relative;
    top: 500px;
    padding: 50px;
    font-size: 35px;
    background-color: #fff;
}   


// second div, cards CSS. 
.card {
  position: relative;
  padding: 0;
  margin: 0;
  -webkit-perspective: 5000;
  perspective: 5000; 
}

.card .container {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: 0.6s;
  transition: 0.6s; 
}

.card .container .front, .card .container .back {
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 
}

.card .container .front .row, .card .container .front .column, .card .container .front .columns, .card .container .back .row, .card .container .back .column, .card .container .back .columns {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 
}

.card .container .front {
  z-index: 2; 
}

.card .container .back {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  overflow-y: scroll;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg); 
}

.card .container:hover {
  -webkit-transform: rotate3d(0, 1, 0, 180deg);
  transform: rotate3d(0, 1, 0, 180deg); 
}

.card .container {
  border: solid 1px #eeeeee; 
}

.card .container .front, .card .container .back {
  padding: 1em; 
}

.card.square .container {
  width: 100%;
  height: 0;
  padding-bottom: 100%; 
} 

Answer 1

Look at this:

.parallax-content {
    max-width: 100%;
    ...
} 

max-width is not width, so if you don't have enough content di stretch the container up to 100%, you total wrapper will be less than 100% and all relative width of the elements inside it will be compromised.

p.s.: align="center" is deprecated