title: Make a page-width div on Reveal.JS presentation
body: <p>In a <a href="https://github.com/hakimel/reveal.js/" rel="nofollow">reveal.js</a> presentation I want my <code>div</code> containing the main <code>h2</code> for the slide to have a page-wide transparent background. So far I have this css:</p>
  
  <pre><code>section div.haikubar {
    padding: 60px 10px 60px 10px;
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: rgba(0,0,0,0.5) 0px 0px 200px;
  } 
  </code></pre>
  
  <p>I have tried <code>width: 100%</code> and several other things but the "bar" never extends the full-width of the page. It's centered and the slide background shows on each side.</p>
  
  <p>Here is a <a href="http://codepen.io/ivanoats/pen/zwDEm" rel="nofollow">CodePen</a> of cut/paste from the built presentation which has most of the HTML/CSS/JS.</p>
  
  <p>Any ideas on what I can use to get the desired effect?</p>