html - Rails应用中的Foundation 5 CSS仅占页面的一半

我正在使用Ruby on Rails和Foundation5框架构建一个个人网站。

问题是我的专栏只延伸到浏览器页面的一半。顶部和标题很好，但是下面的列仅延伸到页面宽度的一半。

我觉得某个地方有一个简单的修复程序，很可能我缺少明显的东西。这是我的查看代码：

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

我的列的类是“小4大4列”，我有3列，所以我希望它可以扩展屏幕的宽度（我认为Foundation5是12列网格）。但这仅扩展到页面的一半。谁能帮我解决它/告诉我怎么了？

谢谢你们！

编辑-这也是我的main.css.scss文件，也许是视差内容，但是我什么都看不到？

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

最佳答案

看这个：

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

max-width不是宽度，
因此，如果您没有足够的内容将容器拉伸到最大100％，则总包装器将小于100％，并且其中所有元素的相对宽度都会受到影响。

附注：align="center"已弃用