Product Landing Page - Build a Product Landing Page

** justify-content and align-items not working on flex display**

At the footer, I want to align this .contact div and .subscription div on each side of the margin but while .contact justifies itself at flex-start, .subscription div isn’t justifying at the flex-end. Can you please point-out what’s wrong with my code?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cocohealth</title>
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
    <!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

</head>
<body>
    <main class="container-fluid">
        <section id="heading">
            <header class="row" id="header">
                <div id="logo" class="col-2">
                    <a class="navbar-brand align-self-center justify-content-start" href="#">
                     <img id="header-img" src="https://www.productsofmyanmar.asia/wp-content/uploads/2017/07/mya-ayar-logo.png"
                     alt="Mya Ayar logo" width="180" height="80" style="border-radius: 50%;"/> </a>
                </div>
                <div class="col-6"></div>
                <div id="navigation" class="col-4">
                    <nav class="container-fluid navbar navbar-expand-sm justify-content-end" id="nav-bar">
                        <button type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#collapseNav"
                        class="navbar-toggler justify-self-end align-self-center"
                        aria-controls="collapseNav"
                        aria-expanded="false"
                        aria-label="Toggle Navigation">
                    <span class="navbar-toggler-icon "></span>
                    </button>

                        <div class="collapse navbar-collapse" style="border-radius: 3px; text-align: center;" id="collapseNav">
                        <ul class="navbar-nav align-self-center">
                            <li class="nav-item active"><a class="nav-link color" href="#home">HOME</a></li>
                            <li class="nav-item"><a class="nav-link color" href="#benefits">BENFITS</a></li>
                            <li class="nav-item"><a class="nav-link color" href="#pricing">PRICING</a></li>
                            <li class="nav-item"><a class="nav-link color" href="#contact">CONTACT</a></li>
                        </div>
                        </ul>
                    </nav>
                </div>
                </header>
        </section>
        <section id="content" class="row">
            <section id="home">
                <div class="text-center title">
                    <br/>
                    <h1>
                        COCOHEALTH
                    </h1>
                    <p>
                        Organic Extra Virgin Coconut Oil
                    </p>
                </div>
                <br/>
                <div id="description-para">
                    <p class="description">
                        Cocohealth is an excellent, high quality extra virgin coconut handcrafted by cold pressed modified natural fermentation method at a FDA approved production Facility. 
                        Due to the use of free range organic coconuts, freshness, careful handling in all stages of 
                        processing and following all GMP standards, our Cocohealth has less FFA (i.e. free fatty acid) 
                        and more MCTs (Medium Chain Triglycerides) than average VCO. 
                        <br/><br/>Therefore, it rivals any other 
                        virgin coconut oil for in taste and quality hence the word 'extra', but retains a mild coconut 
                        flavor and aroma. It is purely organic, as Myanmar coconut trees are free range in nature and 
                        none of the coconut farmer uses fertilizers and other chemicals. This oil is crystal clear and 
                        colorless in the liquid state and an immaculate white when solid. No chemicals or heat are used 
                        in any stage of the process.<br/>
                    </p>
                </div><br/>
                <div id="carouselIndicators" class="carousel slide margin" data-bs-ride="true">
                    <div class="carousel-indicators">
                      <button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                      <button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                      <button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                      <button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
                    </div>
                    <div class="carousel-inner">
                      <div class="carousel-item active">
                        <img src="https://www.productsofmyanmar.asia/wp-content/uploads/2017/07/06.jpg" class="d-block img-fluid" alt="...">
                      </div>
                      <div class="carousel-item">
                        <img src="https://www.productsofmyanmar.asia/wp-content/uploads/2017/08/01-2.jpg" class="d-block img-fluid" alt="...">
                      </div>
                      <div class="carousel-item">
                        <img src="https://www.productsofmyanmar.asia/wp-content/uploads/2017/08/05-1.jpg" class="d-block img-fluid" alt="...">
                      </div>
                      <div class="carousel-item">
                        <img src="https://www.productsofmyanmar.asia/wp-content/uploads/2017/08/06-1.jpg" class="d-block img-fluid" alt="...">
                      </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselIndicators" data-bs-slide="prev">
                      <span class="carousel-control-prev-icon" style="color:#2B7A0B;" aria-hidden="true"></span>
                      <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselIndicators" data-bs-slide="next">
                      <span class="carousel-control-next-icon" style="color:#2B7A0B;" aria-hidden="true"></span>
                      <span class="visually-hidden">Next</span>
                    </button>
                  </div>             
            </section>
            <section id="benefits">
              <br/><br/>
                    <h2>Health Benefits of Consuming our Cocohealth</h2>
                    <br/>

                    <div class="row">
                      <div class="health-benefits col-lg-5 col-xl-5 col-md-12 d-flex
                      justify-content-xl-start justify-content-lg-start justify-content-md-center justify-content-sm-center" id="health-benefits">
                        <br/>
                          <ul>
                            <li>Improves or Reverses Alzheimer's disease</li>
                            <li>Improves Type 2 AND Type 1 Diabetes</li>
                            <li>Reduces Heart Diseases</li>
                            <li>Promotes Weight Loss</li>
                            <li>Supports the Immune System</li>
                            <li>Improves or Heals Many Skin Diseases</li>
                            <li>Conditions and Strengthens Hair</li>
                            <li>Provides Peak Performance Energy</li>
                            <li>Kills Candida Fungus</li>
                            <li>Helps with Hypothyroidism</li>
                            <li> Kills many Bacteria AND Viruses</li>
                          </ul>
                      </div>
                      <div class="col-lg-7 col-xl-7 col-md-12 embed-responsive d-flex justify-content-lg-end 
                      justify-content-xl-end justify-content-md-center justify-content-sm-center" id=
                      "frame-container">

                          <iframe class="embed-responsive-item justify-self-end" src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2F104065527979316%2Fvideos%2F315100642957493%2F&show_text=false&width=560&t=0" 
                          width="500" height="314" 
                          style="border:none;overflow:hidden" 
                          scrolling="no" 
                          frameborder="0" 
                          allowfullscreen="true" 
                          allow="autoplay; 
                          clipboard-write; encrypted-media; picture-in-picture; web-share" 
                          ></iframe>
                        </div>
                    
                    </div>
            </section>
            <section id="pricing">
              <h2>Available Products of Cocohealth</h2>
              <div class="d-flex flex-row" id="card-container">

                <div class="card flex-child" style="width: 16rem;">
                  <img class="card-img-top" src="https://medicarehb.com.mm/wp-content/uploads/2022/05/192773.jpg" alt="cocohealth product-3">
                  <div class="card-body text-center" style="border-bottom: 1px solid #2b7a0b;">
                    <h5 class="card-title ">Cocohealth Body Moisture Lotion (Fruity peach scent)</h5>
                    <p class="card-text">9000 MMK</p>
                  </div>
                  <div class="card-body text-center">
                    <button class="btn btn-block" type="button" style="background-color:#2B7A0B; color:white;">BUY</button>
                  </div>
                </div>

                <div class="card flex-child" style="width: 16rem;">
                  <img class="card-img-top" src="https://medicarehb.com.mm/wp-content/uploads/2022/05/192771.jpg" alt="cocohealth product-4">
                  <div class="card-body text-center" style="border-bottom: 1px solid #2b7a0b;">
                    <h5 class="card-title ">Cocohealth Body Moisture Lotion (Sakura scent)</h5>
                    <p class="card-text">9000 MMK</p>
                  </div>
                  <div class="card-body text-center">
                    <button class="btn btn-block" type="button" style="background-color:#2B7A0B; color:white;">BUY</button>
                  </div>
                </div>

                <div class="card flex-child" style="width: 16rem;">
                  <img class="card-img-top" src="https://medicarehb.com.mm/wp-content/uploads/2022/05/192772.jpg" alt="cocohealth product-5">
                  <div class="card-body text-center" style="border-bottom: 1px solid #2b7a0b;">
                    <h5 class="card-title ">Cocohealth Body Moisture Lotion (Tea-leaf scent)</h5>
                    <p class="card-text">9000 MMK</p>
                  </div>
                  <div class="card-body text-center">
                    <button class="btn btn-block" type="button" style="background-color:#2B7A0B; color:white;">BUY</button>
                  </div>
                </div>

                <div class="card flex-child" style="width: 16rem;">
                  <img class="card-img-top" src="https://medicarehb.com.mm/wp-content/uploads/2022/06/175305.jpg" alt="cocohealth product-1">
                  <div class="card-body text-center" style="border-bottom: 1px solid #2b7a0b;">
                    <h5 class="card-title ">Cocohealth Cold Pressed</h5>
                    <p class="card-text">8000 MMK</p>
                  </div>
                  <div class="card-body text-center">
                    <button class="btn btn-block" type="button" style="background-color:#2B7A0B; color:white;">BUY</button>
                  </div>
                </div>

                <div class="card flex-child" style="width: 16rem;">
                  <img class="card-img-top" src="https://medicarehb.com.mm/wp-content/uploads/2022/01/180149-600x600.jpg" alt="cocohealth product-2">
                  <div class="card-body text-center" style="border-bottom: 1px solid #2b7a0b;">
                    <h5 class="card-title">Cocohealth Night Serum</h5>
                    <p class="card-text">6000 MMK</p>
                  </div>
                  <div class="card-body text-center">
                    <button class="btn btn-block" type="button" style="background-color:#2B7A0B; color:white;">BUY</button>
                  </div>
                </div>
              </div>
            
            </section>
        </section>
        <section id="footer">
          <footer class="row">
                <div class="col-6 d-flex justify-self-start align-self-center">
                  <table class="table table-sm table-borderless">
                    <tr>
                      <td colspan="2">N0.55, Sein Lei Kan Thar Street,</td>
                    </tr>

                    <tr>
                      <td colspan="2">Ywar Thar Gyi Industrial Zone,</td>
                    </tr>

                    <tr>
                      <td colspan="2">South Dagon T/S,</td>
                    </tr>

                    <tr>
                      <td colspan="2">Yangon, Myanmar</td>
                    </tr>

                  </table>
                </div>
               
                <div class="col-6 d-flex justify-content-end align-content-center">
                  <table class="table table-sm table-borderless">
                    <form id="form" action="https://www.freecodecamp.com/email-submit">
                      <tr>
                          <td colspan="2"><label for="email">Get More Updates : </label></td>
                      </tr>

                      <tr>
                        <td><input class="form-control" type="email" placeholder="jackson_wang@gmail.com" style="max-width:300px;"></td>
                      </tr>
                      <tr>
                        <td><input value="Subscribe" type="submit" class="btn" id="submit">
                      </tr>  
                      <tr>
                        <td colspan="2"><label>Phone  : +959 4211 44724</label></td>
                      </tr>

                      <tr>
                        <td colspan="2">E-mail : info@mya-ayer.com</td>
                      </tr>
                    </form>
                  </table>
                </div>
              </footer>
        </section>
    </main>
</body> 
</html>

@import url('https://fonts.googleapis.com/css2?family=Amita:wght@400;700&family=Raleway:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amita:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=David+Libre:wght@500&display=swap');
* {
    margin:0;
    padding:0;
    scroll-padding-top: 70px;
    scroll-behavior: smooth;

}
main {
    background: #FDFC47;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #e8fd88, #ffffff,#e8fd88);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #e8fd88, #ffffff,#e8fd88); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
header {
    background: #56ab2f;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #a8e063, #56ab2f);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #a8e063, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    position: fixed;
    height: 80px;
    right: 0;
    left: 0;
    z-index: 3;
}

.color {
    margin:5px;
    border-radius: 10px;
    font-family: 'Raleway',serif;
    color:white;
}

.color:hover {
    color:bisque;
}

@media only screen and (max-width: 575.98px) {
    #collapseNav {
    background: 	rgb(66, 172, 25,0.7);    
}

  .color:hover {
    background-color: white;
    color:#2B7A0B;
  }

  .contact, .subscription {
    color:white;
    font-family: 'Raleway',serif;
    font-size: 13px;
    margin-top:10px;
}

    
}
    


#home {
    margin-top: 70px;
}
.title {
    grid-area: title;
    justify-self: center;
    align-self:center;
}

.title h1 {
    font-family: 'Amita',cursive;
    font-size: 3rem;
    color: #2B7A0B;
    margin: 0;
}

.title p {
    font-family: 'Raleway',serif;
    font-size: 17px;
    font-weight: bold;
    font-style: italic;
    color: #b9bb48;
    margin: 0;
}

.description {
    color: #797a15;
    font-family: 'Raleway',serif;
    font-size: 16px;
    margin:0 20px;
    
}

.carousel-item img {
    margin:0 auto;
    max-height: 450px; 
}

h2 {
    font-family: 'Raleway',serif;
    color: #2B7A0B;
    text-align: center;
}

iframe {
    margin:10px;
    max-width: 500px;
}


.health-benefits {
    color:#2B7A0B;
    font-family: 'Raleway',serif;
    font-size: 16px;
}

.health-benefits ul {
    list-style: square;
   
    
}
   
    

#card-container {
    margin:20px 30px; 
    flex-wrap:wrap;
    justify-content:space-evenly;

}

.flex-child {
    max-width: 17rem;
    min-width:16rem;
    margin:40px;
}

footer {

    background: #56ab2f;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #a6e45b, #56ab2f);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #a6e45b, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   
}


#submit {
    color: #2B7A0B;
    background-color:white;
    
}

#submit:hover {
    background-color: #2B7A0B;
    color:white;
}



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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

i dont under stand, what are you trying to do?

I figured out that one now. Thank you anyway.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.