How should I got about putting titles beneath the buttons in a clean manner?

I was able to successfully implement social media buttons in my social section. I also want to beneath each button with appropriate spacing and white font with the name of each social media site. How should I go about that?
Code:

hi, i have made changes check this changes.

html code:

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<html>
  <main class="overall-background">
    <nav id="navbar">
      <ul>
      <li><a href= "#about-me">About Me </a></li>
      <li> <a href= "#projects"> Projects </a> </l1>
      <li><a href="#contact">Contact </a></li>
      <li> <a href="#social"> Social</a></li>
      </ul>
    </nav>
 <section class="background" id="welcome-section">
 <h1 class="entry-text"> Personal Portfolio Webpage </h1>
    </section>
  <section>
  <h2>About Me: </h2>
    <section class="flex-container">
   <div>
  <img class= "black-border" src="https://pbs.twimg.com/profile_images/894664349444325376/gx1cNyBc_400x400.jpg" alt="Personal photo above">
  </div>
  <div>
  <p class="about-me-text" id="about-me"> I am currently a student at the University pursuing a degree in Computer Science. I am strongly interested in learning more about the interactions of technology with society, especially with Artificial Intelligence. I’m very excited to build off of my past experiences and learn more about solving emerging problems around the world. </p> </div>
  </section>
  </section>
     <section id="projects"> 
       <h2 class="project-tile">Projects:</h2>
       <h3>Some Projects that I have worked on recently are below</h3>
       <a href="https://github.com/faarissattar/PerfectPlaylist"> Perfect Playlist</a>
    <p> PerfectPlaylist is an Android application which allows users to vocalize anything from how they feel, to a specific artist, and create a playlist based on those elements through natural language processing. I worked on the backend part of the team and focused on using Android Studio, Java, Spotify API, Houndify API, IBM Watson API, and Git. </p> </section>
<section>
       <h1 id="contact"> Contact: </h1>
       <form action"/submit-email-address">
        Email Address: <br>
  <input type="text" required placeholder="Please type in your email address here"> </input> 
       </form>
  Message: <br>
<textarea rows="5" cols="40" required placeholder="Please type in your message here"></textarea>
  <button type="Submit">Submit</button> 
</section>
<section> <!-- changes made here -->
  <h1 id="social"> Social: </h1>
 <div class="icon-bar row">
   <div class="col-4">
  <a href="https://twitter.com/utsavmalik1?lang=en" class="twitter"><i class="fa fa-twitter"></i></a> 
     <p>Twitter</p></div>
  <div class="col-4">
   <a href="http://www.linkedin.com/in/utsav-malik-98b225178" class="linkedin"><i class="fa fa-linkedin"></i></a><p>Linkedin</p></div>
   <div class="col-4">
  <a href="https://github.com/umalik1910" class="github"><i class="fa fa-github"></i></a>
     <p>Github</p></div>
</div>
 </main>
</html>

CSS code:

@media screen {
  body {
    color: black; 
  }
}
#welcome-section {
  width: 100h;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.about-me-text{
 text-align: center;
 font-size: 20px;
}

.background{
  background-image: url("https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/OVoiMR9/binary-code-background-animation_btqql3ix__F0000.png");
}
.entry-text{
  color: white;
  font-size: 40px;
  position: relative;
  top: -100px;
}
.overall-background{
  background-color:lightblue;
}
nav{
  text-align: center;
  position: relative; 
  top: 150px; 
  color: white; 
}
li{
  display: inline;
  background-color: lightblue;
  font-size: 30px;
  padding: 0.85em;
  margin-right: 2em;
  border-radius: 10px;
  color: white;
}
.black-border{
  border-color: black;
  border-style: solid;
  border-width: 10px;
  border-radius: 50%;
}
input{
  width:20%;
  margin: 0 0 8px 0;
}
textarea{
resize: none;
width: 299px;
max-width: 50%;
color:grey;
}
.flex-container{
  display: flex;
  align-items: center;
  justify-content: right;
}
/*changes made here*/
.icon-bar a {
  /*display: inline;*/
  text-align: center;
  padding: 6px;
  transition: all 0.3s ease;
  color: white;
  font-size: 30px;
}
.row{display:flex; flex-wrap:wrap;}
.col-4{width: 8.33%;}


@LearnTheNew