two divs within a wrapper

I can't get the two div "box"s to center within the wrapper.

HTML

<div class="wrapper">
  

  <div class="box">
    <div class="header-title">Human Resources</div>
    <div class="textbox">
      <a href="ENTER_URL_HERE" target="_top">
      <div style="display:table; margin: 0 auto;">
        <span>
          <img src="https://community.canvaslms.com/resources/statics/176812/00_panda.png?a=1478192617338"/>
        </span>
        <span>PandaNet
        </span>
      </div>
      </a>


      <a href="ENTER_URL_HERE" target="_top">
      <div style="display:table; margin: 0 auto;">
        <span>
          <img src="https://community.canvaslms.com/resources/statics/176812/009_okta.png?a=1478193737587"/>
        </span>
        <span>Okta (SSO to all apps)
        </span>
      </div>
      </a>


      <a href="ENTER_URL_HERE" target="_top">
      <div style="display:table; margin: 0 auto;">
        <span>
          <img src="https://community.canvaslms.com/resources/statics/176812/007_placeholder.png?a=1478194503439"/>
        </span>
        <span>Enter_Asset_Title_Here
        </span>
      </div>
      </a>


      <a href="ENTER_URL_HERE" target="_top">
      <div style="display:table; margin: 0 auto;">
        <span>
          <img src="https://community.canvaslms.com/resources/statics/176812/007_placeholder.png?a=1478194503439"/>
        </span>
        <span>Enter_Asset_Title_Here
        </span>
      </div>
      </a>


    </div>
  </div>

  <div class="box">
    <div class="header-title">IT Resources</div>
    <div class="textbox">
      <a href="ENTER_URL_HERE" target="_top">
      <div style="display:table; margin: 0 auto;">
        <span>
          <img src="https://community.canvaslms.com/resources/statics/176812/008_service_desk.png?a=1478194407199"/>
        </span>
        <span>Service Desk
        </span>
      </div>
      </a>


      <a href="ENTER_URL_HERE" target="_top">
      <div style="display:table; margin: 0 auto;">
        <span>
          <img...

CSS

body {
  color: #fff;
  font: 13px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

a:link {
  color: #fff;
  text-decoration: none;
}

a:hover {
  color: #e9e1ea;
  text-decoration: none;
}

a:visited {
  color: #fff;
}

.wrapper {
    display: block;
    text-align: center;
}

.box {
  display: inline-block;
  width:370px;
  height: 370px;
  padding-left: 5px;
  padding-right: 5px;
  vertical-align: top;
}

.header-title {
  background-color: #513B56;
  line-height: 60px;
  text-align: center;
  height: 60px;
  color: #fff;
  font-size: 20px;
}

.textbox {
  color: white;
  font-weight: normal;
  text-align: left;
  padding: 15px 20px 40px 20px;
  height: 245px;
  background-color: #815d89
}

span {
  vertical-align: middle;
  display: table-cell;
  padding: 6px;
  font-size: 18px;
  line-height: 50px;
  height: 50px;
}

span:hover {
    opacity: .5;
    filter: alpha(opacity=50);
}

img {
  vertical-align: middle;
}