Build a tribute page

HTML-CSS
1

  • Failed:Your img element should have a display of block.

  • Failed:Your #image should have a max-width of 100%.

I’ve Just finish building my tribute page but it seems like i cant get these two questains right. Although i have done the CSS style according to the instructions. Here is my code so far. Can someone tell me what Im doing wrong and why its not accepted when i run the test

_______________________________________________________________________________________HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css"> 
  <title>Bangtan Boys</title>


  
</head>

<body>



  <script src="script.js"></script>
  <script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>
  <main id="main">
    <div id="title">
      <h1>
       <span id="major">BTS</span>
        <br>
        <span id="minor">Bangtan Boys</span>
      </h1>
    </div>
    <div class="container">
    <div id="img-div">
      <img id="image"
      <img src="https://assets.teenvogue.com/photos/59aea388f4715071873774a8/16:9/w_2560%2Cc_limit/GettyImages-688759646.jpg"
        alt="BTS rise to stardom"  width="100%"/>
        

      <div id= "img-caption">
        <p>The biggest momments in BTS Stardom</p>
      </div>
      <div id="tribute-info">
      <h2>Timeline</h2>
        <ul>
          <li> 2013 - BTS Debuted with the music <strong>
            2 Cool for School</strong> and <strong>O!RUL 8,2?</strong> and got their first award at the South Korean Melon Music awards. 
          </li>
          <p></p>
          <li> 2015 - Was the year they got recognised on an international level with the songs <strong>I Need You</strong> and <strong>The most beautiful moment in life</strong>, which led the group to their first win at SBS MTV's 'The Show'.
          </li>
          <p></p>
          <li>2017 - Did they have their first television performance for a US audience with hit songs like<strong>DNA </strong>and <strong>Mic Drop</strong> which gave them a spot in Guinness World Record for most Twitter engagements for a music group.
          </li>
          <p></p>
          <li>2019 - Did the group made a music collaboration with pop star Halsey with the song <strong>Boy with luv</strong> which became the fastest korean boy group music video to cross 750 million views on Youtube
          </li>
        </ul>
        <p>Read more on following
          <a 
            id="tribute-link"
            target="_blank"
            href="https://www.wionews.com/photos/bts-biggest-moments-in-the-life-and-rise-to-stardom-of-this-k-pop-band-335468#bts-creates-history-335463">link</a></p>
      </div>
      <img src="https://i.ytimg.com/vi/K7BMF0ozFS0/maxresdefault.jpg " alt="" class="center">
      
    </div>
    </main>
</body>

</html>

_____________________________________________________________________________ Style.CSS

#image{
width: 100%;
height: auto;
max-width:100%;
margin-left: auto;
margin-right: auto;
display:block;
}
h1{
  text-align:center;
}
p{
  text-align:center;
  font-family:serif;
  font-size:20px;
}
span#minor{
  font-size:24px;
}

.container {
  display:grid;
  gap:10px;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}


body {
  background-color:#FCD5E6;
}
2

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

please post a link to the challenge.

is the css file calles styles.css or style.css?

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.