Huddle repsonsive landing page using CSS Gird

Thanks everyone, I was able to make it better with your suggestions.

Good job, completing the challenge!! I recommend that you place each section inside a container with a maximum width so that all the content is centered horizontally for instance

<main class="container container-main">
       <div class="col-img">
       </div>
       <div class="col-text">
       </div>
</main>
<footer class="container-main">
</footer> 

and in the CSS:

.container-main {
    margin: 0 auto; //or use flex to center
    max-width: 1200px;
    width: 90%;
}

Set the main image to width 100% so that it is adaptable

.col-img img{
    width: 100%;
}

And the social network icons you can align to the right or center using flex and media queries so that on large screens it aligns to the right and on small screens it aligns to the center. you can achieve it like this:

<footer class="container-main">
    <div class="social-icons">
        <i class="fa fa-facebook" aria-hidden="true"></i>
        <i class="fa fa-twitter" aria-hidden="true"></i>
        <i class="fa fa-instagram" aria-hidden="true"></i>
    </div>
</footer>

and in the css

.social-icons {
    display: flex;
}
@media (min-width: 982px) {
    .social-icons {
        justify-content: end;
    }
}
@media (max-width: 981px) {
    .social-icons {
        justify-content: center;
    }
}

It is a quick example, I hope I have helped you. Congratulations!!

Hello, I was reviewing the code, I solved the problem by placing a {margin: 2px in the before facebook}, try it and tell me if the result convinces you. Greetings.

.fa.fa-facebook:before { margin: 2px; }

Hello Ceejay, congratulations on finishing this project. There are couple of ways to center facebook icon, I would probably center all of icons by using flexbox on footer .fa class:

footer .fa {
display: flex;
justify-content: center;
align-items: center;
}

Good job and happy coding :)