Design a Blog Post Card - Test 16 / 22

HTML-CSS
1

Tell us what’s happening:

Test 16 and 22 shows wrong and i can’t understand why. They even apply correctly on the page and works, us I expected.

(Even tried to reset the lesson and use another browser)

Your code so far

<!-- file: index.html -->
<!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>
    <div class="blog-post-card">
        <img class="post-img" src="https://img.taste.com.au/Nuk_HYNz/w720-h480-cfill-q80/taste/2018/01/healthy-chicken-chow-mein-134805-1.jpg" alt="chicken chow mein">
        <div class="post-content">
            <h2 class="post-title ">Top 100 easy dinner recipes</h2>
            <p class="post-excerpt">When you need to feed the family or kids, these are the easy dinner recipes you turn to time and time again. With lots of healthy, quick, vegetarian, chicken, and budget-friendly ideas, there is something for everyone.</p>
            <a class="read-more" href="https://www.taste.com.au/quick-easy/galleries/top-100-easy-dinner-recipes/biccuul7">Read More</a>
        </div>
    </div>
</body>
</html>

/* file: styles.css */
body {
  background-color: rgb(188, 186, 186);
}

.blog-post-card {
  background-color: white;
  border-radius: 25px;
  text-align: left;
  width: 80%;
  min-width: 350px;
  margin:9%
}

.post-img {
  width: 100%;
  border-radius: 25px 25px 0 0;
  border-bottom: 5px solid rgb(128, 128, 128);
}

.post-content {
  padding: 15px 10px;
}

.post-title {
  margin: 0;
  color: rgb(40, 40, 40);
}

.post-excerpt {
  margin: 15px 0;
  color: rgb(67, 67, 67);
}

.read-more {
  color: white;
  background-color: rgb(93, 93, 93);
  text-decoration: none;
  padding: 5px 10px;
  margin: 0 35%;
  display: inline-block;
  border-radius: 5px;
  width: 30%;
  text-align: center;
}

.read-more:hover {
  background-color: rgb(35, 34, 34);
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36 OPR/121.0.0.0

Challenge Information:

Design a Blog Post Card - Design a Blog Post Card
https://www.freecodecamp.org/learn/full-stack-developer/lab-blog-post-card/lab-blog-post-card

2

Welcome to the forum @LinaAnhel

Using a 0 value for a margin attribute means that it is not applied for that side of the margin.

Happy coding

1 Like
3

Worked, thank you. Didn’t even think of that

1 Like