Splitting sections

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

The next step we need to do is to implement the sections profileInfo and posts, so we can get a structure to work with, first we will start with the top part and work our way down the page, the profileInfo part will be splitter on left and right divs, on the left there will be the profile picture, while on the right we will have all the info details

Challenge

Easy

Create 2 sections with the ids: profileInfo and posts inside of the background div.
Inside the profileInfo section create 2 divs, one with id left and one with an id right
Style #profileInfo in the styles.css with a width of 80%
Give it a margin vertical (top & bottom) of 1em and horizontal (left & right) of auto
A display of flex, and justify-content of center
gap of 2em and to make it go in 2 rows, a flex-wrap of wrap

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <title>Instagram</title>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div id="background"></div>
    </body>
</html>