Why isn't the color of the text changing?

Question

I am using react.js to make a row of three pictures with a few words on the top and bottom of each image. For some reason when I change the color of my wording it does not change. Anyone knows why and how can I solve it? Thanks

HTML Code

<ImageContainer>
    <titleofexprience>
    stuff
    </titleofexprience>
    
    <img id="experienceImage" src={stufff} alt="nice" />

    <discriptionofexprience>
    </discriptionofexprience>
</ImageContainer>

export const titleofexprience  = styled.nav`
    position: absolute;
    bottom: 0px;
    color: #B0E0E6;
`
export const discriptionofexprience  = styled.nav`
position: absolute;
    bottom: 0px;
    color: #B0E0E6; //I try to change the color of the wording but it is not chaning it
`

Answer 1

Why you use <nav> element for this? You should use any inline element like <span> or something.