Displaying images in new line using HTML/CSS - html

Question

I'm trying to display 2 images in a line below a line of text, but they show up in the same line. I tried using the "clear: both" property and "display: block" property in the CSS style for the images. What am I missing?
I included a screenshot of what it looks like as well as the relevant section of the HTML code and the complete CSS stylesheet. The "media" class is what I am using for the images. They are showing on the same line as the section under the "Contacts" div.
screenshot of website here
body {
background-color: #63a4ff;
background-image: linear-gradient(315deg, #63a4ff 0%, #83eaf1 74%);
}
.fadeline {
background-color: white;
margin: 25px 20%;
width: 60%;
height: 1px;
}
.fadeline.white {
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}
.fadeline.black {
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.row {
background-color: white;
margin: 0% 15% 0% 15%;
padding-bottom: 15%;
padding-top: 50px;
color: #586E95;
}
.header {
text-align: center;
padding-left: 40%;
}
#about {
text-align: center;
}
p {
margin: 0 auto;
display: block;
clear: both;
}
.example {
margin: 0 auto;
background-color: white;
border: 1px solid black;
border-radius: 10%;
outline: none;
width: 20%;
}
a,
a:hover {
text-decoration: none;
display: block;
}
img {
max-height: 90%;
max-width: 90%;
}
.media {
height: 55px;
width: 55px;
display: block;
margin: 0 auto;
}
<div id="contact" class="row text-center">
<h1 class="header">Contact</h1>
<div class="fadeline black"></div>
<p> Want to connect? Reach out with Facebook or LinkedIn.</p>
<div class='media'>
<a href='https://www.facebook.com/siddharth.gampa/'><img src='https://facebookbrand.com/wp-content/uploads/2019/04/f_logo_RGB-Hex-Blue_512.png?w=512&h=512'></a>
</div>
<div class='media'>
<a href='https://www.linkedin.com/in/siddharth-gampa/'><img src='https://image.flaticon.com/icons/svg/174/174857.svg'></a>
</div>
</div>

Answer 1

If you place both images in one div with the class .media then set that div to display: flex that should work.
Check out the example code below by clicking the Run code snippet
body {
background-color: #63a4ff;
background-image: linear-gradient(315deg, #63a4ff 0%, #83eaf1 74%);
}
.row {
display: flex;
flex-direction: column;
background-color: white;
margin: 0 15%;
padding: 50px 0;
color: #586E95;
}
.text-center {
text-align: center;
}
.heading {
text-align: center;
}
.fadeline {
background-color: white;
margin: 25px 20%;
width: 60%;
height: 1px;
}
.fadeline.white {
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}
.fadeline.black {
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.media {
display: flex;
justify-content: center;
width: 100%;
}
a img {
width: 40px;
margin: 0 10px;
}
<div id="contact" class="row text-center">
<h1 class="heading">Contact</h1>
<div class="fadeline black"></div>
<p> Want to connect? Reach out with Facebook or LinkedIn.</p>
<div class='media'>
<a href='https://www.facebook.com/siddharth.gampa/'>
<img src='https://facebookbrand.com/wp-content/uploads/2019/04/f_logo_RGB-Hex-Blue_512.png?w=512&h=512'>
</a>
<a href='https://www.linkedin.com/in/siddharth-gampa/'>
<img src='https://image.flaticon.com/icons/svg/174/174857.svg'>
</a>
</div>
</div>

Answer 2

It looks like they're not below the text because they're in the same div with the row class.
Put them in a div below the row and it should work

Answer 3

Add a class to both images. For example
Class="img-1"
And
Class="img-2"
Make their position relative then push one of the images to the right. It may take some fiddling to get the locations correct