Problems with div width on building tribute page

HTML-CSS
#1

Hey guys,
I’ve got some problems while building the tribute page. I want #img-div to spread over 80% of the screen-width. Instead it seems to wrap #image. I want it to be responsive, so I can’t use a fixed width like px. What am I missing here?

header p {
  text-align: center;
  margin: 0 0 4rem 0;
}

#img-caption {
  background-color: #cdd1e8;
  margin: 0.7rem 0.4rem;
  padding: 0.4rem 0.4rem; 
  width: 100%;
}

#img-div {
  background-color: #fcfeff;
  margin: 0 auto;
  padding: 10px; 
  border-radius: 10px;
  width: 80%;
}

#image {
  display: block;
  height: auto; 
  width: 100%;
  margin: 0 auto; 
}

h1 {
  font-size: 4rem; 
  margin: 3rem 0 0 0; 
  text-align: center;
}

#tribute-info {
  display: block;
  padding: 0 30%;
  margin: 15px;
  text-align: justify;
  color: #616161; 
  font-style: italic; 
  font-size: 0.9rem;
}

    <div id="img-caption">
    <header>
      <h1>Audre Lorde</h1>
      <p>African-American writer, womanist, radical feminist, professor, and civil rights activist</p>
    </header>
    <main id="main">
      <div id="img-div">
       <img src="https://capiremov.org/wp-content/uploads/2021/02/Audre_Lorde-Jack-Mitchell_Getty-Images.jpg" alt="Picture of Audre Lorde standging front of a wall" id="image">
       <p id="tribute-info">She was a self-described "black, lesbian, mother, warrior, poet," who "dedicated both her life and her creative talent to confronting and addressing injustices of racism, sexism, classism, and homophobia."</p>
      </div> 
  </main>
  </div>
#2

Hey, I tried recreating your page and my #image seems to be working just fine.
It’s hard to tell due to you only uploading a portion of your HTML, but my guess is that you have missed the closing div tag of #img-caption after the </header>. You might have pushed it down all the way down your </main>.

#3

Thanks for your help! :slight_smile: sorry for not uploading all, it’s my first time :see_no_evil:
I thought I closed the tag properly :thinking: I intented to give #image a white background which spreads over 80% of the screen, which I tried to achieve with #img-div… Like in the example https://tribute-page.freecodecamp.rocks

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter+Tight">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title id="title">Audre Lorde</title>
  </head>
  <body>
    <div class="wrapper">
    <main id="main">
      <h1>Audre Lorde</h1>
      <p id="tribute-info">African-American writer, womanist, radical feminist, professor, and civil rights activist</p>
      <div id="img-div">
       <img src="https://capiremov.org/wp-content/uploads/2021/02/Audre_Lorde-Jack-Mitchell_Getty-Images.jpg" alt="Picture of Audre Lorde standging front of a wall" id="image">
       <div id="img-caption">
         <p>She was a self-described "black, lesbian, mother, warrior, poet," who "dedicated both her life and her creative talent to confronting and addressing injustices of racism, sexism, classism, and homophobia."
         </p>
       </div>
      </div> 
      <h2>Here's a time line of Lorde's life:</h2>
      <ul>
        <li>
        <span class="bold bigger">1934</span> - Lorde was born February 18, 1934 in New York City to Caribbean immigrants. 
        </li>
        <li>
        <span class="bold bigger">1954</span> - Lorde spent a pivotal year as a student at the National University of Mexico, a period she described as a time of affirmation and renewal. 
        </li>
        <li>
        <span class="bold bigger">1959</span> - On her return to New York, Lorde attended Hunter College, and graduated in the class of 1959. While there, she worked as a librarian, continued writing, and became an active participant in the gay culture of Greenwich Village. She furthered her education at Columbia University, earning a master's degree in library science in 1961.
        </li>
        <li>
        <span class="bold bigger">1968</span> - Lorde was writer-in-residence at Tougaloo College in Mississippi. Lorde's time at Tougaloo College, like her year at the National University of Mexico, was a formative experience for her as an artist. 
        </li>
        <li>
        <span class="bold bigger">1969-1981</span> - Lorde taught in the Education Department at Lehman College from 1969 to 1970, then as a professor of English at John Jay College of Criminal Justice (part of the City University of New York, CUNY) from 1970 to 1981. There, she fought for the creation of a black studies department. 
        <li>
        <span class="bold bigger">1981</span> - Lorde was among the founders of the Women's Coalition of St. Croix, an organization dedicated to assisting women who have survived sexual abuse and intimate partner violence. 
        </li>
        <li>
        <span class="bold bigger">1984</span> - Lorde started a visiting professorship in West Berlin at the Free University of Berlin. She was invited by FU lecturer Dagmar Schultz who had met her at the UN "World Women's Conference" in Copenhagen in 1980. During her time in Germany, Lorde became an influential part of the then-nascent Afro-German movement. Together with a group of black women activists in Berlin, Audre Lorde coined the term "Afro-German" in 1984 and, consequently, gave rise to the Black movement in Germany.
        </li>
        <li>
        <span class="bold bigger">1992</span> - dies in November 17 at the age of 58 in St. Croix
        </li>
      </ul>
      <p class="quote">
      "It is not our differences that divide us. It is our inability to recognize, accept, and celebrate those differences." - Audre Lorde
      </p>
      <p class="wikilink">If you have time, you should read more about this incredible human being on her <a href="https://en.wikipedia.org/wiki/Audre_Lorde" id="tribute-link" target="_blank">Wikipedia entry</a>. 
      </p>
     </main>
    </div>
  </body>
</html>

* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter Tight', Tahoma, sans-serif; 
  background-color: #fcfeff;
  color: #303030;
}

h1 {
  text-align: center;
  margin: -1rem 0 2rem 0;
  font-size: 4rem;
}

.wrapper {
  background-color:#cdd1e8;
  margin: 0.7rem 0.4rem;
  padding: 0.4rem 0.4rem; 
  width: 100%;
}

#img-div {
  background-color: #fcfeff;
  margin: 0 auto;
  padding: 10px; 
  border-radius: 10px;
  width: 80%;
}

#image {
  display: block;
  height: auto; 
  max-width: 100%;
  margin: 0 auto; 
}

#img-caption {
  margin: 0;
  text-align: justify;
  color: #616161; 
  font-style: italic; 
  font-size: 0.9rem;
}

#tribute-info {
  text-align: center; 
  margin: 0 0 3rem 0;
}

main {
  padding: 3.5rem 20% 0 20%; 
}

main h2 {
  text-align: center;
  margin: 3rem 0 3rem 0; 
}

main ul li {
  padding: 0 0 1.8rem 0; 
}

.bold {
  font-weight: bold; 
}

.bigger {
    font-size: 1.1rem;
}

.quote {
  font-style: italic; 
  margin: 0;
  padding: 1rem 20% 1.5rem 20%; 
  text-align: center;
}

.wikilink {
  text-align: center;
  font-weight: bold; 
  margin: 1.5rem 0 2.5rem 0; 
}

main p a:link {
  color: #616161;
}

main p a:visited {
  color: #616161;
}

main p a:hover {
  color: #303030;
}
#4

From what I understand, you want the white background around the image to be larger.
It has to do with your

and your main element.
When using width: %, you target the width of the parent element.
The parent of your #img-div is your main element.
Your main element doesn’t have a width, but it has a very large padding. Open your preview in a new window, right click and choose inspect.
image
image1906×992 262 KB

The green area is your padding. The blue is your content. (I set the #img-div width to 100% to test).
Try getting rid of the wrapper. A better practice is to set your body element:

body  {
  width: 100%;
  height: 100vh;
}

Hope this helps!

#5

Thanks so much! “Inspect” is really helpful and helped me figure out the mistake I made. Got rid of the wrapper as well.