Project 9g - Divs not loading side by side

[SenKio9]

Even when I copy and paste the example html and css code, the divs all appear stacked on top of one another instead of side by side, any ideas why?

Mooncat

10 mutual friends

Add Friend

Andy Frasco

18 mutual friends

Add Friend

Derek Vincet Smith

4 mutual friends

Add Friend

`p {
font-family: Arial;
margin-top: 0;
margin-bottom: 0;
}

.profile-preview {
width: 200px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
display: inline-block;
margin-right: 15px;
}

.profile-picture {
width: 200px;
height: 200px;
object-fit: cover;
margin-bottom: 12px;
}

.name {
font-size: 18px;
font-weight: bold;
margin-left: 8px;
margin-bottom: 4px;
}

.mutual-friends {
font-weight: 500;
color: rgb(100, 100, 100);
margin-left: 8px;
margin-bottom: 12px;
}

.add-friend-button {
background-color: rgb(24, 119, 242);
color: white;
font-size: 16px;
margin-left: 8px;
margin-bottom: 10px;
padding: 10px 20px;
border: none;
border-radius: 4px;
}
`

[ahmedtwilight]

To display the profile previews side by side, you need to wrap them in a container and apply CSS to that container to make them display inline or inline-block. Here's how you can modify your code:

HTML:

CSS: .profile-container { white-space: nowrap; }
.profile-preview {
width: 200px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
display: inline-block;
margin-right: 15px;
vertical-align: top;
}
Rest of the CSS styles remain unchanged
In the HTML code above, I wrapped the .profile-preview elements inside a .profile-container div. Then, in the CSS code, I added white-space: nowrap; to the .profile-container to prevent the profiles from wrapping to the next line. Additionally, I added vertical-align: top; to align the profiles at the top within the container.

With these modifications, the profile previews should appear side by side instead of stacked on top of each other.

[EMPERORBB7]

You need to close the dicv in the html fro what I see in your code the css is alright but I think maybe you didn't close the div in the html for the first code before pasting the second div

[Titiksha-rgb]

the div in which you kept "name", "number of mutual friends", "Add friend button", change or mention the "display:inline-block" property in the three divs., as inline-block property would let the elements take as much space as they need to, thus, the three divs would come side by side.