How do I vertically align these divs in my footer?

Question

I am building a mock investor site but can't seem to align content in my footer correctly. Everything is skewed to the left, making it appear a bit ugly. I'd like to make the logo, social media buttons and contact info centered but here is what it currently looks like:

I tried using align-content: center and margin: auto but nothing changed. Maybe the solution is using flexbox? Here is my code for the footer and for the CSS:

import React from "react";
import logo from "../../assets/images/logo.png";
import { IconContext } from "react-icons";
import {
  FaEnvelope,
  FaFacebookF,
  FaInstagram,
  FaLinkedin,
  FaPhone,
  FaTwitter,
} from "react-icons/fa/index";
import '../../assets/css/footer.css';

function Footer() {
  const year = (new Date()).getFullYear();

  return (
    <footer style={{backgroundColor: '#0c1f47'}} className="footer p-3 p-sm-4 p-md-5 row mx-auto overflow-hidden">
      <div className="col-lg-4 my-4">
        <div className="logo">
          <img width="50px" src={logo} alt="logo" />
          <h2 className="mb-0 mt-2">TECK</h2>
        </div>

        <p className="my-4 text-justify text-sm-left">
          Teck is a simplified and better style of communication between
          investors and startups
        </p>        
      </div>

      <div className="col-lg-4 col-sm-6 my-4">
        <h2 className="my-2">Follow Teck</h2>
          <div className="socials my-4">
            <IconContext.Provider
              value={{
                style: {
                  fontSize: "35px",
                  padding: '5px',              
                  color: "#fff",
                },
              }}>
              <a data-aos="fade-right" data-aos-duration="300" data-aos-delay="200" data-aos-once="true" className="ml-0" target="_blank" rel="noreferrer" href="">
                <FaFacebookF className="icon" />
              </a>
            </IconContext.Provider>
            <IconContext.Provider
              value={{
                style: {
                  fontSize: "35px",
                  padding: '5px',              
                  color: "#fff",
                },
              }}>
              <a data-aos="fade-right" data-aos-duration="300" data-aos-delay="500" data-aos-once="true" target="_blank" rel="noreferrer" href="">
                <FaInstagram className="icon" />
              </a>
            </IconContext.Provider>
            <IconContext.Provider
              value={{
                style: {
                  fontSize: "35px",
                  padding: '5px',              
                  color: "#fff",
                },
              }}>
              <a data-aos="fade-right" data-aos-duration="300" data-aos-delay="800" data-aos-once="true" target="_blank" rel="noreferrer" href="">
                <FaLinkedin className="icon" />
              </a>
            </IconContext.Provider>
            <IconContext.Provider
              value={{
                style: {
                  fontSize: "35px",
                  padding: '5px',              
                  color: "#fff",
                },
              }}>
              <a data-aos="fade-right" data-aos-duration="300" data-aos-delay="1100" data-aos-once="true" target="_blank" rel="noreferrer" href="">
                <FaTwitter className="icon" />
              </a>
            </IconContext.Provider>
          </div>
        </div>

      <div className="col-lg-4 col-sm-6">
        <h2 className="mt-4 d-block mb-0">Contact Us</h2>

        <ul className="footer-box">
          <li>
            <a href="tel:+995595896687" className="text-white">
              <FaPhone className="mb-1 mr-2" />+995 555 5555
            </a>
          </li>
          <li>
            <a href="mailto:info@tecklink.co" className="text-white">
              <FaEnvelope className="mb-1 mr-2" />info@teck.co
            </a>
          </li>
        </ul>
      </div>
      <div className="col-12 text-center mt-5">
        <small>{year} Teck Corporation &copy; All Right Reserved</small>
      </div>
    </footer>
  );
}

export default Footer;

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
* {
  padding: 0;
  margin: 0;
}

footer {
  color: #fff;
  font-family: "Montserrat", sans-serif;
}

.col-md-4 img {
  width: 50px;
  height: 50px;
}
.logo {
  display: flex;
  align-items: center;
}

.logo > img {
  margin-right: 20px;
}

.logo > h2 {
  margin-bottom: 0;
  padding-right: 50%;
}

.footer h2 {
  font-weight: 600;
  font-size: 20px;
}

.footer ul {
  list-style: none;
  padding-left: 0;
}

.footer a {
  text-decoration: none;
}

.footer-box {
  margin-top: 20px;
}

.footer-box a {
  color: #fff;
}

.footer-box li {
  padding-bottom: 5px;
}

.socials a {
  width: 40px;
  height: 40px;
  display: inline-block;
  margin-left: 20px;
}

.icon:hover {
  border-radius: 5px;
  box-shadow: 0 0 1px 2px #25eee2;
}

@media screen and (min-width: 600px) {
  .col-md-4 img {
    width: 50px;
  }
  .col-md-4 img {
    width: 30px;
    height: 30px;
  }
}

Answer 1

You should wrap everything inside the <footer> tag in a div container with a class 'wrapper' and add the following css.

.wrapper {
display: flex;
justify-content: center;
align-items:enter;
}