Align multiple images & text horizontally

Question

I've searched and tried several different suggestions for this, but nothing is working.

I am trying to horizontally center 3 images with a caption underneath. Pretty new to CSS. Thanks for your help in advance!

#container {
  margin: auto;
  width: 1190px;
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center;
}
.box {
  display: block;
  margin: 0px;
  white-space: nowrap;
}
.box img {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  vertical-align: middle;
}
.box p {
  position: relative;
  width: 100%;
  top: 12px;
  z-index: 2;
  text-align: center;
  font-size: 1.5em;
  left: 15px;
}
.clear {
  clear: both;
}
.wrapper {
  margin: 0 auto;
  padding: 0 10px;
  width: 1190px;
}

L:
<div id="container">
  <div class="wrapper">
    <h3>Heading Here</h3>
  </div>

  <div class="box">

    <a href="#">
      <img src="images/features-icon-1.png" alt=" ">
      <p>Option 1</p>
    </a>

    <a href="#">
      <img src="images/features-icon-2.png" alt=" ">
      <p>Option 2</p>
    </a>

    <a href="#">
      <img src="images/features-icon-3.png" alt=" ">
      <p>Option 3</p>
    </a>

  </div>

  <div class="clear"></div>
</div>

Answer 1

You were just missing a container wrapper for your content.

I have added a div to wrap your image, text & link.

Also changes .box img to .box div

That's all you were missing.

#container {
  margin: auto;
  width: 1190px;
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center;
}
.box {
  display: block;
  margin: 0px;
  white-space: nowrap;
}
.box div {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  vertical-align: middle;
}
.box p {
  position: relative;
  width: 100%;
  top: 12px;
  z-index: 2;
  text-align: center;
  font-size: 1.5em;
  left: 15px;
}
.clear {
  clear: both;
}
.wrapper {
  margin: 0 auto;
  padding: 0 10px;
  width: 1190px;
}

<div id="container">
  <div class="wrapper">
    <h3>Heading Here</h3>
  </div>

  <div class="box">
    <div>
      <a href="#">
        <img src="images/features-icon-1.png" alt=" ">
        <p>Option 1</p>
      </a>
    </div>
    <div>
      <a href="#">
        <img src="images/features-icon-2.png" alt=" ">
        <p>Option 2</p>
      </a>
    </div>
    <div>
      <a href="#">
        <img src="images/features-icon-3.png" alt=" ">
        <p>Option 3</p>
      </a>
    </div>
  </div>

  <div class="clear"></div>
</div>