title: Full width footer with Foundation framework
body: <p>I am trying to make my footer panel go across the page but it seems to just stick in the middle. My header has filled across the page. Am I doing something wrong. I am basically trying to make both of the panel at the bottom go across the full width of the page.</p>
  <h3>HTML</h3>
  <pre><code>&lt;body&gt;
    &lt;header&gt;
      &lt;div class=&quot;large-12&quot;&gt;
        &lt;div class=&quot;panel&quot;&gt;
          &lt;h1 class=&quot;nowrap text-center&quot;&gt;Header&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;br&gt;&lt;br&gt;
    &lt;/header&gt;
  
    &lt;div class=&quot;large-4 columns&quot;&gt;
      &lt;div class=&quot;panel&quot;&gt;
  
        &lt;h3&gt;Sidebar&lt;/h3&gt;
  
        &lt;h5&gt;lorem&lt;/h5&gt;
          &lt;ul class=&quot;text-left &quot;&gt;
            &lt;!-- # used as placeholder --&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;link 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;link 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;link 3&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;link 4&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;link 5&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;div class=&quot;large-8 columns&quot;&gt;
      &lt;div class=&quot;panel&quot;&gt;
        &lt;h1&gt;Call To Action&lt;/h1&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quas quasi perspiciatis unde cumque nesciunt nisi eveniet natus nemo quia, sequi non, ab, beatae aliquam. Dolore accusamus quos esse similique architecto, aut consequatur ratione placeat, veritatis ea sit tempore corporis cupiditate voluptas? Nesciunt rem vel corporis consectetur perferendis hic perspiciatis amet totam quod, impedit reiciendis suscipit aperiam, eum ex dolorem fugit repellendus sit. Non, facere labore, veritatis nobis corporis sapiente dignissimos dolore ex maxime a quia ipsum recusandae, quos velit atque perferendis quibusdam, deserunt eius? Modi facilis impedit dolorem saepe, nobis eius voluptatibus perspiciatis iste, quis at, amet ex cum?&lt;/p&gt;    
      &lt;/div&gt;
  
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;columns large-6&quot;&gt;
          &lt;p class=&quot;panel columns&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum tempora, ipsam. Quos, hic reprehenderit perferendis ut illo minus. Quae odit laborum excepturi inventore consequuntur deserunt rerum dolorum optio, sit. Maiores.&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class=&quot;columns large-6&quot;&gt;
          &lt;p class=&quot;panel columns&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio possimus unde labore delectus quia asperiores adipisci magni molestias libero in et modi assumenda nesciunt sapiente, error, necessitatibus, sed accusantium itaque.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;large-12 columns&quot;&gt;
          &lt;div class=&quot;panel&quot;&gt;
            &lt;h1&gt;Website in no time&lt;/h1&gt;
          &lt;/div&gt;
  
         &lt;footer&gt;
           &lt;div class=&quot;large-12&quot;&gt;
             &lt;div class=&quot;panel&quot;&gt;
               &lt;h1 class=&quot;nowrap text-center&quot;&gt;Footer&lt;/h1&gt;
             &lt;/div&gt;
           &lt;/div&gt;
         &lt;/footer&gt;
  </code></pre>