Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

Everything is working as expected but last 3 tests are failing.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Selection Feature Page</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
<h1>Feature Selection</h1>
<div class="feature-card-container">
    <label class="card">
       
            <input type="checkbox">
           <h4>Cloud Storage</h4>
           <p>100 gigabyte secure storage</p>
    </label>
    <label class="card">
      
            
            <input type="checkbox">
             <h4>Dedicated Support</h4>
             <p>100 gigabyte secure storage</p>
    </label>
     <label class="card">
      
            
            <input type="checkbox">
             <h4>Dedicated Support</h4>
             <p>100 gigabyte secure storage</p>
    </label>
    <label class="card">
      
            
            <input type="checkbox">
             <h4>Dedicated Support</h4>
             <p>100 gigabyte secure storage</p>
    </label>
    <label class="card">
      
            
            <input type="checkbox">
             <h4>Dedicated Support</h4>
             <p>100 gigabyte secure storage</p>
    </label>
     <label class="card">
      
            
            <input type="checkbox">
             <h4>Dedicated Support</h4>
             <p>100 gigabyte secure storage</p>
    </label>
</div>
</body>

</html>

/* file: styles.css */
h1{
  text-align: center;
  padding-top: 15px;
} 

.feature-card-container{
  display: flex;
  flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items:center;

}

.card{
  min-width: 250px;
width: 250px;
height: 100px;
border: 2px solid lightgray;
border-radius: 10px;
margin: 10px;
position: relative;
}


.card:hover{
  border-color: #e2a60d;
  box-shadow: 0 2px 6px  #f1be32;
  cursor: pointer;
}
h4, p{
  text-align: center;
}

input[type='checkbox'] {
  position: absolute;
    top: 5px;
    right: 5px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  appearance: none;
  border: 2px solid #f1be32;
  border-radius: 4px;
  background-color: white;
  vertical-align: middle;
  margin-right: 15px;
}

input[type='checkbox']:checked {
  background-color: #f1be32;
  border-color: #e2a60d;
}

input[type="checkbox"]:checked::after {
  content: "✓";
  display: block;
  text-align: center;
font-weight: bold;
  color: white;
  line-height: 20px;    
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page
https://www.freecodecamp.org/learn/full-stack-developer/lab-feature-selection/design-a-feature-selection-page

2

please go back to user story 3, you never implemented it completely