title: Bootstrap 2.3.2: Using CSS to wrap featurettes in another container?
body: <p>So I have the following code, taken from the source code in <a href="http://getbootstrap.com/2.3.2/examples/carousel.html" rel="nofollow noreferrer">this example.</a></p>
  
  <pre><code>&lt;div class="container marketing"&gt;
  
      &lt;hr class="featurette-divider"&gt;
        &lt;!-- START THE FEATURETTES --&gt;
  
        &lt;div class="featurette"&gt;
          &lt;img class="featurette-image pull-right" src=&lt;%= asset_path("akpsi_color_200.png")%&gt;&gt;
          &lt;br /&gt;
          &lt;h2 class="featurette-heading"&gt;Alpha Kappa Psi: &lt;span class="muted"&gt;Established in 1904&lt;/span&gt;&lt;/h2&gt;
          &lt;p class="lead"&gt;Alpha Kappa Psi Fraternity is the world's &lt;i&gt;oldest&lt;/i&gt; and &lt;i&gt;largest&lt;/i&gt; professional fraternity, with an international network spanning across all geographies, careers, and backgrounds. &lt;br /&gt; &lt;br /&gt;We provide our brothers with professional guidance throughout their college years to ensure that upon graduation, we are each equipped with a skill set necessary to survive in any work environment. &lt;/p&gt;
        &lt;/div&gt;
  
        &lt;hr class="featurette-divider"&gt;
  
        &lt;div class="featurette"&gt;
          &lt;img class="featurette-image pull-left" src=&lt;%= asset_path("akpsi_color_200.png")%&gt;&gt;
          &lt;h2 class="featurette-heading"&gt;Why AKΨ? &lt;span class="muted"&gt;See for yourself.&lt;/span&gt;&lt;/h2&gt;
          &lt;p class="lead"&gt;Cal is a big place, and it's easy to feel as if you are just a face in a large crowd. But there are many professional fraternities and clubs which can be your "home" in the University. By joining a group such as Alpha Kappa Psi, you'll have an instant network of peers and alumni who've faced the same challenges as you and who are ready to help you with your career.&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;hr class="featurette-divider"&gt;
  &lt;/div&gt;&lt;!-- /.container --&gt;
  </code></pre>
  
  <p>What I want to do is place both of these featurettes in a box with a bit of padding on the sides -- here's my stylesheet for the box:</p>
  
  <pre><code>.account-wall-static
  {
      margin-top: 20px;
      padding: 40px 40px 40px 40px;
      background-color: #f7f7f7;
      -moz-box-shadow: -5px 0 2px -5px rgba(0, 0, 0, 0.3), 5px 0 2px -5px rgba(0, 0, 0, 0.3);
      -webkit-box-shadow: -5px 0 2px -5px rgba(0, 0, 0, 0.3), 5px 0 2px -5px rgba(0, 0, 0, 0.3);
      box-shadow: -5px 0 2px -5px rgba(0, 0, 0, 0.3), 5px 0 2px -5px rgba(0, 0, 0, 0.3);
  
  }
  </code></pre>
  
  <p>So what I did was simply place another <code>div class="account-wall-static"</code> tag outside of the <code>div class="container marketing"</code> tag. However, this is the result:</p>
  
  <p><img src="https://i.stack.imgur.com/swzzW.png" alt="enter image description here"></p>
  
  <p>The content is leaking out of the right side of the box. It seems like the padding on the right isn't being detected or I'm not coding it correctly; what is the correct way to do this?</p>