Nesting classes in HTML element won't work

What am I doing wrong?

I have nested two classes, but only one is working. My image is small but there is no green border surrounding it.

.red-text { color: red; }

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.smaller-image {
width: 100px;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid; }

CatPhotoApp

A cute orange cat lying on its back.

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

Can you paste the html here too please?

If you want to include a block of code in a forum post, wrap it with triple back ticks (```)—as you can see, some of your code actually gets interpreted as HTML instead of text.

Anyhow, the problem is because you have multiple class attributes in your <img> tag:

<img class="smaller-image" class="thick-green-border" src='//discourse-cloud-file-uploads.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/6/1/61a3499c5abb165be990aa0c1abd23342e60c663.jpg' alt="A cute orange cat lying on its back. ">

Which should be the following instead:

<img class="smaller-image thick-green-border" src='//discourse-cloud-file-uploads.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/6/1/61a3499c5abb165be990aa0c1abd23342e60c663.jpg' alt="A cute orange cat lying on its back. ">

There should only be one class attribute and you can include multiple classes by space-separating them.

EDIT: Also, this is not nesting I don’t think.

1 Like

Hi honmanyau,

Thank you for responding, I did eventually figure out what I was doing wrong but I do appreciate you putting in the time to reply. In the future, I will use triple back ticks when I post a block of code.

.red-text { color: red; }
h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.smaller-image {
width: 100px;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid; }