CSS - Numbers | Bio

Lesson 10 of 16 in Coddy's Instagram Page Clone | Front-End Project course.

And the final thing to do to finish the top section profileInfo is to style and arrange the numbers and bio.

Challenge

Easy

Style the infoMid to have a display of flex
For the elements to not be touching each other we will give the infoMid a justify-content of space-evenly
Finally, for the bio to be inline with every else above it we will give it a margin-left of 0.5em

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <title>Instagram</title>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div id="background">
            <section id="profileInfo">
                <div id="left">
                    <img alt="Profile Picture" src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FB1W4ovz1wpFwKXcrZmzV%2Finjected_t0?alt=media&token=799f5980-a8c4-43a6-82ca-1f8ba57a360f">
                    <h2 id="username">zimbakovtech</h2>
                </div>
                <div id="right">
                    <div id="userTop">
                        <div class="button" id="follow">Follow</div>
                        <div class="button">Message</div>
                        <div class="button"><img src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FYGTvUtASn8CI5DiXWvFs%2Finjected_t0?alt=media&token=631ebb8f-3a01-4dec-b525-8a7460661676" alt="Add"></div>
                        <img id="more" src="https://firebasestorage.googleapis.com/v0/b/coddy-for-creators.appspot.com/o/courses%2FX5ybxTVELN2Bvmegdcgl%2FYGTvUtASn8CI5DiXWvFs%2Finjected_t1?alt=media&token=351f4b48-6f68-4cd7-83c3-0c7f67bed30b" alt="more">
                    </div>
                    <div id="infoMid">
                        <p><b>3</b> posts</p>
                        <p><b>110</b> followers</p>
                        <p><b>35</b> following</p>
                    </div>
                    <div id="bioBot">
                        <p><b>Zimbakov Tech</b><br>
                        <span style="color: grey">Tutor / Teacher</span><br>
                        Freelancer, course creator and coding tutor<br>
                        Coding | Courses | Websites | Apps<br>
                        Course Creator at Coddy, Inc</p>
                    </div>                   
                </div>
            </section>
            <section id="posts"></section>
        </div>
    </body>
</html>