Design a Blog Post card - Failing test 20

HTML-CSS
1

The brief says that the img element with class post-img should fill the whole card, but when I set its width to 100%, which should be a 100% of its parent element div, the test n.20 fails. Any suggestions on what could be going wrong? I attach my html and css code for reference.

Blockquote

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Post Card</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <main>
        <div class="blog-post-card">
            <img src="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg" alt="Blurred photo of a laptop screen" class="post-img">
            <div class="post-content">
                <h2 class="post-title">Start your Web development journey</h2>
                <p class="post-excerpt">It's never too late to start your journey as a softwate engineer. The world is your oyster.</p>
                <a class="read-more" href="">Read More</a>

            </div>
        </div>
    </main>
</body>
</html>

Blockquote

body{
  width: 500px;
}

.blog-post-card{
  background-color: white;
  width: 70%;
  text-align: center;
  border-radius: 20px;
  
  

}

.post-img{
  width: 100%;
  border-radius: 20px;
  border-bottom: 20px;
  margin-bottom: 1px;
  

}

.post-img{
  border-top: 1px;
  border-radius: 20px;
}

.post-content{
  padding: 40px;
}

.post-title{
  color: blue;
}

.post-excerpt{
  color: red;
}

.read-more{
  color: green;
  background-color: lightblue;
  margin: 10px;
  padding: 5px;
  border: 2px solid green;
  border-radius: 5px;
  display: inline-block;

}

.read-more:hover{
  background-color: blue;
}
2 
    </div>
Blockquote body{ width:600px; }
3

can you give a link to the project please?

the best way to create a post is to use the HELP button on the left of the page in a lab, so your code gets properly formatted and a link is already included

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 (').

4

It isn’t the width, it is the border. Without a border-style it won’t show up.

When two tests are combined like this, it would be helpful if the camper could see which of the tests are failing.