Why does my image caption doesn' change it's properties?

I just completed the tribute project on the responsive web design course. I wanted to make it look better with the minimal knowledge that I have. I cant seem to change the caption, either padding, margins or font size. can any body explain why?

the html part:

<main id="main">
  <h1 id= "title"> Nakagawa Kanon</h1>
  <h2> The best 2D idol</h2>
  
  <div id="img-div"> 
    <img id="image" src="https://static.zerochan.net/Nakagawa.Kanon.full.801315.jpg" alt="Kanon posing with a microphone" ></img>
    <figcaption id="img-caption">Kanon being CUTE</figcaption>
 </div>

  <div id="tribute-info">
    <p>Kanon is a teenage girl with short pink hair that she is notable for (she used to have waist-length hair during her time in Citron) and dark-pink eyes.<p>

Being a superstar idol, Kanon probably has the most number of changes in her clothing in the series, from casual to flamboyant. She is often (if not always) seen wearing a big, yellow ribbon. Most of the time, she seems to wear a blue (sometimes brown) coat over her stage clothes and a hat to prevent being recognized easily by the public. Kanon also wears large, glasses at school.

In the anime, Kanon's school uniform is different from other school girls as she wears a short pink tie with a red jewel in place of a red ribbon. 
 </div>  
  
  <footer id="footer">
    You can read more about this GODDESS on her <a href="https://kaminomi.fandom.com/wiki/Kanon_Nakagawa" target="_blank" id="tribute-link">fandom page</a>
    
</main>

the css part:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');


#main{
  background-color: rgb(104, 103, 172);
  font-family: "Roboto", sans-serif;
  text-align: center;
  color: #FFF;
  padding-bottom: 3em;
}

#title{
  font-size:2.5em;
  padding-top:1em;
  margin-bottom:-0.25em;
}

#img-div{
  background-color: rgb(206, 123, 176);
  width:500px;
  border-radius: 30px;
  max-width:100%
  height:auto;
  margin:auto;
}

#image{
  display:block;
  text-align:center;
  width:350px;
  max-height:90%;
  max-width:90%;
  height: auto;
  margin: auto;
}

  }
}

#img-caption{
  font-size: 20px;
  font-weight: bold;
}

my codepen link:
https://codepen.io/rkpinata/pen/MWELEwz
#tribute-info{
  width:800px;
  font-size:20px;
  text-align:justify;
  margin: auto;
}

#footer{
  font-size: 30px;
  margin-top:1.5em;
}
#tribute-link{
  color:rgb(255, 188, 209);
}

#tribute-link:hover{
  color:rgb(255,255,255);
}

Hi @RKPinata

Welcome to the FCC forum

Looks like you have some stray brackets which shouldn’t be there.

omg im blind tysm xD

the figcaption should be inside the figure tag for it to respond i.e

cannon being cute
1 Like