尝试使用内联块来居中div元素，但不能正常工作

Question

HTML：

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
  <div class="w3-card-8 w3-dark-grey" style="width:40%">
    <div class="w3-card-8 w3-dark-grey">
      <div class="w3-container w3-center">
        <h3>Featured Event</h3>
        <img src="http://i65.tinypic.com/xaqqs9.png" alt="Rock n Swap Poster" style="width:80%">
        <h5>Rock 'N Swap - August 28th</h5>
        <a href="/events">
          <button class="w3-btn w3-green">Learn More!</button>
        </a>
        <br>
        <br>
      </div>
    </div>
  </div>

<div class="w3-card-8 w3-dark-grey" style="width:40%">
    <div class="w3-card-8 w3-dark-grey">
      <div class="w3-container w3-center">
        <h3>Featured Event</h3>
        <img src="http://i65.tinypic.com/xaqqs9.png" alt="Rock n Swap Poster" style="width:80%">
        <h5>Rock 'N Swap - August 28th</h5>
        <a href="/events">
          <button class="w3-btn w3-green">Learn More!</button>
        </a>
        <br>
        <br>
      </div>
    </div>
  </div>

注意：尝试使用display：inline-block创建一个CSS元素，但它仍然出现在第一个div下面。我希望它们并排排列......最终能够在彼此旁边添加更多div。