Can't find the fix for #8 & #9 on Tribute Page

Tell us what’s happening:
I’m trying to pass the tests and I’m getting 2 fails, #8 & #9.
The page looks responsive and I can’t understand what’s wrong.

github page:
https://andrei-anderson.github.io/tribute/
Your code so far
html code

<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="css/style.css">

    <title>Remember the victims of the Holocaust</title>

  </head>

  <main id="main">

    <body>

      <h1 id="title">“The only thing necessary for the triumph of evil is for good men to do nothing.”― Edmund Burke</h1>

      <div id="img-div">

        <div class="column">

          <img id="image" src="images/auschwitz_entrance.jpeg" alt="aushwitz_entrance">

          <img id="image" src="images/auschwitz_birkenau_train.jpg" alt="aushwitz_birkenau_train">

          <img id="image" src="images/children_in_stripped_uniform.jpg" alt="children in stripped uniform">

          <img id="image" src="images/deportation_to_treblinka.jpg" alt="deportation to treblinka">

        </div>

        <div class="column">

          <img id="image" src="images/women_and_children.jpg" alt="women and children">

          <img id="image" src="images/adolf_eichman_trial.jpg" alt="adolf eichman trial">

          <img id="image" src="images/nuremberg_trials_1.jpg" alt="nuremberg trials_1">

          <img id="image" src="images/nuremberg_trials.jpg" alt="nuremberg trials">

        </div>

        <p id="img-caption">“What exactly was the difference? He wondered to himself. And who decided which people wore the striped pajamas and which people wore the uniforms?”

        ― John Boyne, The Boy in the Striped Pajamas</p>

      </div>

      <hr class="divider">

      <div id="tribute-info">

        <p>The Holocaust, also known as the Shoah, was the World War II genocide of the European Jews. Between 1941 and 1945, across German-occupied Europe, Nazi Germany and its collaborators systematically murdered some six million Jews, around two-thirds of Europe's Jewish population. The murders were carried out in pogroms and mass shootings; by a policy of extermination through work in concentration camps; and in gas chambers and gas vans in German extermination camps, chiefly Auschwitz, Bełżec, Chełmno, Majdanek, Sobibór, and Treblinka in occupied Poland.</p>

        <p>Germany implemented the persecution in stages. Following Adolf Hitler's appointment as Chancellor on 30 January 1933, the regime built a network of concentration camps in Germany for political opponents and those deemed "undesirable", starting with Dachau on 22 March 1933. After the passing of the Enabling Act on 24 March, which gave Hitler plenary powers, the government began isolating Jews from civil society; this included boycotting Jewish businesses in April 1933 and enacting the Nuremberg Laws in September 1935. On 9–10 November 1938, eight months after Germany annexed Austria, Jewish businesses and other buildings were ransacked or set on fire throughout Germany and Austria during what became known as Kristallnacht (the "Night of Broken Glass"). After Germany invaded Poland in September 1939, triggering World War II, the regime set up ghettos to segregate Jews. Eventually thousands of camps and other detention sites were established across German-occupied Europe.</p>

        <p>The segregation of Jews in ghettos culminated in the policy of extermination the Nazis called the Final Solution to the Jewish Question, discussed by senior Nazi officials at the Wannsee Conference in Berlin in January 1942. As German forces captured territories in the East, all anti-Jewish measures were radicalized. Under the coordination of the SS, with directions from the highest leadership of the Nazi Party, killings were committed within Germany itself, throughout occupied Europe, and within territories controlled by Germany's allies. Paramilitary death squads called Einsatzgruppen, in cooperation with the German Army and local collaborators, murdered around 1.3 million Jews in mass shootings and pogroms between 1941 and 1945. By mid-1942, victims were being deported from ghettos across Europe in sealed freight trains to extermination camps where, if they survived the journey, they were gassed, worked or beaten to death, or killed by disease, medical experiments, or during death marches. The killing continued until the end of World War II in Europe in May 1945.</p>

      </div>

    </body>

    <hr class="divider">

    <footer class="wiki-info">

      <p>Please read more on the <a id="tribute-link" href="https://en.wikipedia.org/wiki/The_Holocaust" target="_blank">wikipedia page</a>.</p>

    </footer>

  </main>

</html>

css code

body {

  background-color: #dddddd;

}

#title {

  color: #113c4a;

  text-align: center;

  font-family: Merriweather, serif;

  font-size: 30px;

}

#tribute-info {

  margin: 15px 20px;

  color: #265a5c;

  font-size: 20px;

  font-family: Roboto, sans-serif;

}

#tribute-link {

  text-decoration: none;

  color: #113c4a;

}

#tribute-link:hover {

  text-decoration: underline;

  color: #113c4a;

}

#img-caption {

  margin: 15px 20px;

  color: #113c4a;

  font-size: 24px;

  font-family: Merriweather, serif;

}

.divider {

  border-top: 3px solid #3f7b70;

}

.wiki-info {

  color: #3f7b70;

  font-size: 30px;

  text-align: center;

}

/* image grid css*/

#img-div {

  display: flex;

  flex-wrap: wrap;

  padding: 0 4px;

  justify-content: center;

}

#image {

  width: 100%;

  margin: 4px auto;

  margin-left: auto;

  margin-right: auto;

}

.column {

  flex: 25%;

  max-width: 25%;

  padding: 0 4px;

}

.column img {

  margin-top: 8px;

  vertical-align: middle;

  width: 100%;

}

/* Responsive layout */

@media screen and (max-width: 900px) {

  .column {

    flex: 50%;

    max-width: 50%;

  }

}

@media screen and (max-width: 600px) {

  .column {

    flex: 100%;

    max-width: 100%;

  }

}

/* text css */

@media screen and (max-width: 900px) {

  #tribute-info {

    flex: 50%;

    max-width: 50%;

  }

}

@media screen and (max-width: 600px) {

  #tribute-info {

    flex: 100%;

    max-width: 100%;

  }

}

Challenge: Build a Tribute Page

You need to leave the FCC tests in your page so we can run the tests for ourselves in order to help you.

Also, since you have a github repo, you don’t need to paste all your code in here, just give us a link to the repo.

Sorry ))

I’ve edited your post 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.

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

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)

    • The test script should be included, with all tests passing, when you submit your projects.
  • When test fail click the red button to see which test(s) are failing and text to help you correct the issue.
    (Be sure and read more than just the first line of the failing message.)

The only test that is not passing for me is 1 under #Layout.

Error message: The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size. Try using the “max-width” style property : expected ‘none’ to not equal ‘none’.

The error message is telling you that it is expecting a max-width to be set on the image.

But you have another problem, you have multiple images on the page all with id=image. This is not valid HTML, id’s need to be unique. So give all of your images unique id’s, but one of them has to be id=image and it must have a max-width set on it (in other words, that image will have to pass all of the tests).