@davsanter1
Posted
Hello, your design looks great!
The reason of the problem with the right side is that you set the width of the "div img-container" to 100%, instead of 50%, but not only that, there is not width for the "div info" so it makes the right side to take as much space as it wants, to fix that set width on both divs to 50% so they "understand" they should share the container.
Also I would add a padding to the "div info" to make it look closer to the challenge desing.
Your code corrected should look like this:
img-container {
background-image: url(/images/image-product-desktop.jpg);
background-position: center;
background-size: cover;
width: 50%;
height: 28.125rem;
z-index: 1;
}
.info {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 50%;
padding: 2em;
}
Hope it helps!
Marked as helpful
@CSE-Kyle
Posted
@davsanter1 I appreciate your feedback, thank you!