Hyperlinked Image Container Too Wide

Question

I'm trying to create a "row" of three hyperlinked boxes which include a descriptive text at the top and an image below that. However for some reason the container box that I've created left aligns my content, then extends out to be about double the width that I want.

What would be the best way to get it to wrap to just the minimum width required to contain the image and text? Additionally, what makes the container act the way it does now versus just wrapping the minimum width by default?

My code can be found below, as well as on this jsfiddle page. Please also enjoy the beautiful sample picture I found on W3Schools.com:

.smallimgbox {
  float: left;
  margin-left: auto;
  margin-right: auto;
}

.smallimgboxcontainer {
  overflow: auto;
  margin-right: auto;
  margin-left: auto;
  padding-right: auto;
  padding-left: auto;
}

.smallimgbox img {
  width: 50%;
  height: 50%;
  margin: auto;
}

<div class="smallimgboxcontainer">
  <div class="smallimgbox">
    <a href="">
      <h3>Link #1</h3>
      <img src="https://www.w3schools.com/css/paris.jpg">
    </a>
  </div>

  <div class="smallimgbox">
    <a href="">
      <h3>Link #2</h3>
      <img src="https://www.w3schools.com/css/paris.jpg">
    </a>
  </div>

  <div class="smallimgbox">
    <a href="">
      <h3>Link #3</h3>
      <img src="https://www.w3schools.com/css/paris.jpg">
    </a>
  </div>
</div>

Answer 1

If I understand your question correctly, you want a row divided into 3 boxes with the image and the text centered inside each box. With your code, at the moment, each smallimgbox defaults to the width of the contained img. Then you resize the image to 50% of its container box.

To have the row divided in 3 parts (using floats) you need to specify a width for each, this way:

.smallimgbox {
    width: 33.3%:
}

If you want the image to be 50% f the container and centered you have to set margin: 0 auto and make sure the img is displayed as a block:

.smallimgbox img {
   display: block;
   margin: 0 auto;
}

At this point you are only missing the text:

.smallimgbox {
   text-align: center;
}

I updated the jsFiddle.