I’m having the same issue!
Update I’ve cleaned up the code a bit and have made some progress. Still not getting the desert image to exactly fit, and the Card alignment is different than the forms. How do i get the card to align better with the form? And is there something im not linking properly from my HTML code to control the desert image’s size?
Hi Ayla, and welcome to the community!
It looks like you are super close to figuring out that card styling. Really nice job so far!
As I look at your code, I notice a few things related to the desert image. I notice you have nested
<div> elements around your image (
<div class="card"> and within it,
When we’re trying to line things up, it’s really important to think about our elements in terms of parent containers and child elements. In this case, you would have the
div.card (a parent),
div.desert (a child of card, and parent of the image), and the image itself (a direct child of
So, to troubleshoot the type of issue that you’re running into, trying to get the image to fill the width of the parent container, you need to analyze this nesting of divs and make sure you are applying css to the right selectors. I see some css code for the image, and for
.card, but I don’t see any css code for
So, if I had your files to play around in, I would try the following:
- Try removing the
<div class="desert">element from the HTML file, OR try applying css code directly to
.desert. That way you would be dealing with a direct parent-child relationship.
- Try out some of the other values for setting max-width. For example, if you try “inherit”, it will inherit the max-width you set for its parent element.
For aligning the form and the card together, you can think about a similar parent-child concept. If you create a
<div> that surrounds the form and card, you can style that to set the same alignment values to both children.
Let me know if any of these ideas help.
Thank you for the help! Passed my assessment