Project 9g - Divs not loading side by side about html-css-course-2022 HOT 1 OPEN

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.

from html-css-course-2022.