How to place objects in one line and distribute evenly on the screen using CSS? - html

Question

could anyone share with me how to place objects in one line and distribute evenly on the screen using CSS? I'm a newcomer to web world, just trying to create own project.
I have the following html code:
section class="contact section" id="contact">
<h2 class="section__title">Contact Me</h2>
<span class="section__subtitle">Get in touch</span>
<div class="contact__container container grid">
<div>
<div class="contact__information">
<i class="fas fa-phone contact__icon"></i>
<div>
<h3 class="contact__title">Call me</h3>
<span class="contact__subtitle">[phone]</span>
</div>
</div>
<div class="contact__information">
<i class="fa-solid fa-envelope contact__icon"></i>
<div>
<h3 class="contact__title">Email</h3>
<span class="contact__subtitle">test#gmail.com</span>
</div>
</div>
<div class="contact__information">
<i class="fa-solid fa-location-dot contact__icon"></i>
<div>
<h3 class="contact__title">Location</h3>
<span class="contact__subtitle">Hamburg, Germany</span>
</div>
</div>
</div>
</div>
</section>
</main>
.contact__information{
display: flex;
flex-direction: row;
justify-content: center;
}
My result was provided in attachments.
enter image description here
I'm using that CSS block, but it place by a column in the center. I would like to spread contact details in a human-redable format in one line (something like this, bit it changes positions when you use other screen size.
enter image description here

Answer 1

.contact {
display: flex;
flex-direction: column;
align-items: center;
}
.contact__container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 100%;
}
And the div between contact__container and contact__information is not necessary.

Answer 2

Add css on div child of div contact__information
<section class="contact section" id="contact" style="
/* display: flex; */
/* flex-direction: row; */
"><h2 class="section__title">Contact Me</h2><span class="section__subtitle">Get in touch</span><div class="contact__container container grid" style="
display: flex;
flex-direction: row;
"><div style="
display: flex;
flex-direction: row;
justify-content: space-evenly;
"><div class="contact__information"><i class="fas fa-phone contact__icon"></i><div><h3 class="contact__title">Call me</h3><span class="contact__subtitle">[phone]</span></div></div><div class="contact__information"><i class="fa-solid fa-envelope contact__icon"></i><div><h3 class="contact__title">Email</h3><span class="contact__subtitle">test#gmail.com</span></div></div><div class="contact__information"><i class="fa-solid fa-location-dot contact__icon"></i><div><h3 class="contact__title">Location</h3><span class="contact__subtitle">Hamburg, Germany</span></div></div></div></div></section>