Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

I am getting the error " Your #image should be centered within its parent."
Ive tried fixing it on my own but dont know what im doing wrong.
Your code so far

<!-- file: index.html -->
<!DOCTYPE hmtl>
<html lang="en">
  <head>
<meta charset="UTF-8"/>
<title id="title">Color Experts Beauty Salon</title>
<link href="styles.css" rel="stylesheet/">
<h1 id="name" class="title">Color Experts Beauty Salon</h1>
</head>
<body>
  <main id="main">
  <div id="img-div">
    <img id="image" src="https://www.google.com/url?sa=i&url=https%3A%2F%2Funsplash.com%2Fs%2Fphotos%2Fsalon&psig=AOvVaw37hTw3NmGGt8X6HVrPn0AV&ust=1665763916090000&source=images&cd=vfe&ved=0CAoQjRxqFwoTCPCn8qfM3foCFQAAAAAdAAAAABAI">
    <figcaption id="img-caption">A beauty salon</figcaption>
    </img>
    </div>
    <div>
      <h2 id="tribute-info">Come book an appointment with us.
        </h2>
        <a id="tribute-link" href="https://www.google.com/" target="_blank">https://www.google.com/
          </a>
      </div>
  
    </main>
  </body>


/* file: styles.css */
header{
  border: 10px;
}

h1{
  color:#396a93;
  text-align: center; 
  border: 30px; 


}

img{
  width: 75%;
  margin: 50px auto 50px 60px; 
  max-width: 100%;
  max-height: auto;
  align-items: center;
  display: block;
  ;
}

body{
  background-color: gray;

}

a{
color: silver
}

#img-div img{
  display: block;
  flex-wrap: center;
  text-align: center; 
  justify-content: center;

}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

try setting the left and right margin to auto so it centers it

1 Like
3

Thank you! That worked!

1 Like