Trouble formatting images in my CSS

Issue

community! I am having trouble getting the formatting down for a few images I have.

HTML

<footer>
    <section class="socialmedia">
        <a href=""><img src="facebook.png" class="sm"></a>
        <a href=""><img src="twitter.png" class="sm"></a>
        <a href=""><img src="instagram.png" class="sm"></a>
    </section>
</footer>

CSS

.sm {
    display: block;
}

/* Add a hover effect */
.sm:hover {
    opacity: 0.7;
}

.socialmedia {
    display: block;
    left: 45%;
    float: left;
    width: 2%;
}

The images are just lined up vertically to the left of the page, all at the original size. To my understanding the

float: left;

is used to make them horizontal?

Also I would like them to be centered on the page, but margin: auto; is not changing anything either.

EDIT: I would like to have some spacing between each image as well, is there an alternative to

& nbsp;

Solution

you can simply do this (no need float and left property):

img.sm {
  max-width:30px;
  width:100%;
  margin:5px;
}

/* Add a hover effect */

img.sm:hover {
  opacity: 0.7;
}

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

<footer>
  <section class="socialmedia">
    <a href=""><img src="https://lorempixel.com/100/100/" class="sm"></a>
    <a href=""><img src="https://lorempixel.com/200/200/" class="sm"></a>
    <a href=""><img src="https://lorempixel.com/150/150/" class="sm"></a>
  </section>
</footer>

Answered By - Temani Afif