Single Landing Page (Mobile-first responsive approach + Flexbox)

Hi Paras, Great that you're using mobile first approach on your solution; that's the correct way to go! With regards to your question it's an easy fix, do the below:

body{
    margin: 5vh 10vw;
    background-color: hsl(257, 40%, 49%);
    background-image: url(images/bg-mobile.svg);
    background-position: top;
    background-size: contain;
    font-family: 'Open Sans', sans-serif;

    /* ADD THE BELOW CODE */
    background-repeat: no-repeat;
}

Also, did you notice that when viewing your solution in mobile screen sizes, your social links appear above you .main content; I think you should cut-and-paste the below code into your <div class="main"> container as you have display: flex; on it:

 <div class="social-link">
        <a href=""><aria-hidden="true" img src="images/facebook.png" alt=""></a>
        <a href=""><aria-hidden="true" img src="images/twitter.png" alt=""></a>
        <a href=""><aria-hidden="true" img src="images/instagram (1).png" alt=""></a>
</div>

Notice that I included the aria-hidden="true" attribute for you <img> tag, this helps screenreaders skip images that are purely decorative.

Lastly, instead of using <div>'s everywhere in your HTML structure, try and use semantic HTML, you can read more on it here.

For example your <div class="main"> element can be: <main class="main">.

Hope the above helps!

Best of luck on your coding journey!