title: Position 3 div boxes side-by-side below a wider single div
body: <p>I'm trying to get 3 divs to all be side by side below another div (that contains a h1 and a piece of small text below it). I'm having some trouble doing it.</p>
  
  <p>What I am aiming for is something like this:
  <a href="https://i.stack.imgur.com/duMjA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/duMjA.png" alt="enter image description here"></a></p>
  
  <p>I've tried to put a div (that encompasses the 3 other divs) below the main title div.</p>
  
  <p>I've tried this CSS:</p>
  
  <pre><code>.content-info {
      text-align: center;
      font-family:'Montserrat', sans-serif;
      top: 80%;
      left: 50%;
      text-align:center;
  }
  /* this is for the 3 divs to set width, etc*/
  .content-info div {
      width:300px;
      padding:25px;
      margin: 25px;
  } 
  </code></pre>
  
  <p>Here is a JSFiddle of what I've got so far: <a href="http://jsfiddle.net/4zx9gxgL/" rel="nofollow noreferrer">http://jsfiddle.net/4zx9gxgL/</a></p>
  
  <p>Any suggestions/ideas?</p>