Centering Horizontally aligned images in footer HTML and CSS

Question

Okay, so I'm redoing a footer so it will have responsive design, right now, the social logos are not centered. Instead, they are to the left a slight bit. HTML:

<div class="footcontainer">
            <footer class="web-footer">
                <div class="footerfull footerfullback">
                    <div class="footwrap">
                        <div class="space"></div>
                            <div class="text-center">
                                <ul class="social">
                                    <li>
                                        <a href="https://www.facebook.com/">
                                            <img src="css/social/facebook.png"></img>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://twitter.com/">
                                            <img src="css/social/twitter.png"></img>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://instagram.com/">
                                            <img src="css/social/Instagram.png"></img>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://www.youtube.com/">
                                            <img src="css/social/youtube.png"></img>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://plus.google.com/">
                                            <img src="css/social/g+.png"></img>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://github.com/" target="_blank">
                                           <img src="css/social/Github.png"></img>
                                        </a>
                                    </li>
                                </ul>
                                <br/>
                                <a href="https://github.com/"><p class="h5">Source Code for this Website</p></a>
                                <br/>
                        </div>
                        </div>

CSS:

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

.social {
  display: inline-block;
  line-height: 1;
  margin-bottom: 16px;
  list-style: none;
  text-align: center;
}

.web-footer {
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
  width: 100%;
    diplay:block;
  margin: 0;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  padding: 0;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  border: 0;
    border-top-color: initial;
    border-top-style: initial;
    border-top-width: 0px;
    border-right-color: initial;
    border-right-style: initial;
    border-right-width: 0px;
    border-bottom-color: initial;
    border-bottom-style: initial;
    border-bottom-width: 0px;
    border-left-color: initial;
    border-left-style: initial;
    border-left-width: 0px;
      box-sizing: border-box;
  display: block;
}

.footerfull {
  max-width: 100%;
      margin: 0;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  padding: 0;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  border: 0;
    border-top-color: initial;
    border-top-style: initial;
    border-top-width: 0px;
    border-right-color: initial;
    border-right-style: initial;
    border-right-width: 0px;
    border-bottom-color: initial;
    border-bottom-style: initial;
    border-bottom-width: 0px;
    border-left-color: initial;
    border-left-style: initial;
    border-left-width: 0px;
      box-sizing: border-box;
  display: block;
}

.footerfullback {
  background: #D2D7D3;
    margin: 0;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  padding: 0;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  border: 0;
    border-top-color: initial;
    border-top-style: initial;
    border-top-width: 0px;
    border-right-color: initial;
    border-right-style: initial;
    border-right-width: 0px;
    border-bottom-color: initial;
    border-bottom-style: initial;
    border-bottom-width: 0px;
    border-left-color: initial;
    border-left-style: initial;
    border-left-width: 0px;
      box-sizing: border-box;
}

.footwrap {

  width: 100%; 
  text-align: center;
}

.social>* {
  display: inline-block;
      margin: 0 8px;
    margin-top: 0px;
    margin-right: 8px;
    margin-bottom: 0px;
    margin-left: 8px;
  text-align: center;

}

.social a {
  display: inline-block;
  text-align: center;
}



.h5 {
  text-align: center;
      font-size: 1.6rem;
    line-height: 1.6;
    letter-spacing: 0.070em;
  font-family: Montserrat;
}

.foo {
  width: 100%;
 background:#bdc3c7;
}


.footcontainer {
  margin: auto;
  text-align: center;
}

I've been trying a lot of things with the CSS, so it might seem a little messy. How do I make the logos centered?

Answer 1

Why not put a <center> before and after the code and a .social {padding-left: 0} ?

Answer 2

by default the ul has a padding to the left, by adding padding-left: 0 to you social class will center you social icons

.social { padding-left: 0; }