Flex and media query test suite

I’ve been facing an issue with 2 test suites that I’m sure should pass. My product landing page has flexbox and media queries, yet I can’t pass these two tests. kindly guide me is there a technical issue with the compiler.

It is impossible for us to see what is wrong without your code. Please post your code. Thanks

1 Like
<!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">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
        integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Product Landing page</title>
</head>

<body>
    <!---Navbar------>
    <header id="header">
    <nav id="nav-bar"class="navbar navbar-expand-lg navbar-light bg-light">

        <div class="container px-1">

            <a class="navbar-brand" href="#">
                <img id="header-img" src="https://w7.pngwing.com/pngs/915/781/png-transparent-crochet-thread-handicraft-aran-jumper-pattern-others-miscellaneous-hat-logo.png"
                    alt="" width="80" height="70" class="d-inline-block align-text-top">

            </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <a class="nav-link active" aria-current="page" href="#intr">Introduction</a>
                    <a class="nav-link" href="#tut">Tutorials</a>
                    <a class="nav-link" href="#ppr">Pricing</a>
                    <a class="nav-link" href="#cnt">Contacts</a>
                </div>
            </div>
        </div>
    </nav>
    </header>
    <!---------Main Image section-------->

    <section class="main-img">


    </section>

    <!------join our news leetter section----->

    <section class="news-letter">
        <div class="container d-flex justify-content-between align-items-center p-4">
            <div>
                <h3 class="price-heading">Subscribe our news letter</h3>
            </div>
            <form id="form" action="https://www.freecodecamp.com/email-submit">
            <div class="d-flex justify-content-between align-items-center">

                <input id="email" type="email" name="email" class="form-control" placeholder="Enter your email" id="exampleInputEmail1" 
                    aria-describedby="emailHelp"> &nbsp;
                <input id="submit" type="submit" class="btn btn-primary">
                
            </div>
            </form>

        </div>
    </section>

    <!------------about us------------>
    <section>
        <div class="mt-5 container d-flex justify-content-center align-items-center ">
            <h2  id="intr"class="aboutus price-heading">About crochet</h2>
        </div>
        <div class="mt-2 container d-flex justify-content-center align-items-center">
            <p>Crochet is a process of creating textiles by using a crochet hook to interlock loops of yarn, thread, or
                strands of other materials. The name is derived from the French term crochet, meaning 'small hook'.
                Hooks can be made from a variety of materials, such as metal, wood, bamboo, or plastic. Learn more about
                it on wikipedia.</p>
        </div>

    </section>

    <!------------tutorial------------>
    <section>
        <div class="mt-5 container d-flex justify-content-center align-items-center ">
            <h2 class="aboutus price-heading clearfix" id="tut">Here's a tutorial of how to crotchet for absolute beginners:</h2>

        </div>
        <div class="container mt-3">
            <iframe id="video" src="https://www.youtube.com/embed/aAxGTnVNJiE" title="YouTube video player"
                frameborder="0" allowfullscreen width="100%" height="450"></iframe>
        </div>


    </section>

    <!------Pricing-->

    <div id="generic_price_table">
        <section>
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <!--PRICE HEADING START-->
                        <div class="price-heading clearfix">
                            <h1 class="mt-3" id="ppr">Get your tools right away</h1>
                        </div>
                        <!--//PRICE HEADING END-->
                    </div>
                </div>
            </div>
            <div class="container">

                <!--BLOCK ROW START-->
                <div class="row">
                    <div class="col-md-4">

                        <!--PRICE CONTENT START-->
                        <div class="generic_content clearfix">

                            <!--HEAD PRICE DETAIL START-->
                            <div class="generic_head_price clearfix">

                                <!--HEAD CONTENT START-->
                                <div class="generic_head_content clearfix">

                                    <!--HEAD START-->
                                    <div class="head_bg"></div>
                                    <div class="head">
                                        <span>Standard</span>
                                    </div>
                                    <!--//HEAD END-->

                                </div>
                                <!--//HEAD CONTENT END-->

                                <!--PRICE START-->
                                <div class="generic_price_tag clearfix">
                                    <span class="price">
                                        <span class="sign">$</span>
                                        <span class="currency">49</span>
                                        <span class="cent">.99</span>
                                        <span class="month">/MON</span>
                                    </span>
                                </div>
                                <!--//PRICE END-->

                            </div>
                            <!--//HEAD PRICE DETAIL END-->

                            <!--FEATURE LIST START-->
                            <div class="generic_feature_list">
                                <ul>
                                    <li><span>1</span> loreum ipsum</li>
                                    <li><span>2</span> loreum ipsum</li>
                                    <li><span>3</span> loreum ipsum</li>
                                    <li><span>4</span>loreum ipsum</li>
                                    <li><span>5</span> loreum ipsum</li>
                                </ul>
                            </div>
                            <!--//FEATURE LIST END-->

                            <!--BUTTON START-->
                            <div class="generic_price_btn clearfix">
                                <a class="" href="">Buy Now</a>
                            </div>
                            <!--//BUTTON END-->

                        </div>
                        <!--//PRICE CONTENT END-->

                    </div>

                    <div class="col-md-4">

                        <!--PRICE CONTENT START-->
                        <div class="generic_content active clearfix">

                            <!--HEAD PRICE DETAIL START-->
                            <div class="generic_head_price clearfix">

                                <!--HEAD CONTENT START-->
                                <div class="generic_head_content clearfix">

                                    <!--HEAD START-->
                                    <div class="head_bg"></div>
                                    <div class="head">
                                        <span>Premium</span>
                                    </div>
                                    <!--//HEAD END-->

                                </div>
                                <!--//HEAD CONTENT END-->

                                <!--PRICE START-->
                                <div class="generic_price_tag clearfix">
                                    <span class="price">
                                        <span class="sign">$</span>
                                        <span class="currency">99</span>
                                        <span class="cent">.99</span>
                                        <span class="month">/MON</span>
                                    </span>
                                </div>
                                <!--//PRICE END-->

                            </div>
                            <!--//HEAD PRICE DETAIL END-->

                            <!--FEATURE LIST START-->
                            <div class="generic_feature_list">
                                <ul>
                                    <li><span>1</span> loreum ipsum</li>
                                    <li><span>2</span> loreum ipsum</li>
                                    <li><span>3</span> loreum ipsum</li>
                                    <li><span>4</span>loreum ipsum</li>
                                    <li><span>5</span> loreum ipsum</li>
                                </ul>
                            </div>
                            <!--//FEATURE LIST END-->

                            <!--BUTTON START-->
                            <div class="generic_price_btn clearfix">
                                <a class="" href="">Buy Now</a>
                            </div>
                            <!--//BUTTON END-->

                        </div>
                        <!--//PRICE CONTENT END-->

                    </div>
                    <div class="col-md-4">

                        <!--PRICE CONTENT START-->
                        <div class="generic_content clearfix">

                            <!--HEAD PRICE DETAIL START-->
                            <div class="generic_head_price clearfix">

                                <!--HEAD CONTENT START-->
                                <div class="generic_head_content clearfix">

                                    <!--HEAD START-->
                                    <div class="head_bg"></div>
                                    <div class="head">
                                        <span>Custom Legend</span>
                                    </div>
                                    <!--//HEAD END-->

                                </div>
                                <!--//HEAD CONTENT END-->

                                <!--PRICE START-->
                                <div class="generic_price_tag clearfix">
                                    <span class="price">
                                        <span class="sign">$</span>
                                        <span class="currency">149</span>
                                        <span class="cent">.99</span>
                                        <span class="month">/MON</span>
                                    </span>
                                </div>
                                <!--//PRICE END-->

                            </div>
                            <!--//HEAD PRICE DETAIL END-->

                            <!--FEATURE LIST START-->
                            <div class="generic_feature_list">
                                <ul>
                                    <li><span>1</span> loreum ipsum</li>
                                    <li><span>2</span> loreum ipsum</li>
                                    <li><span>3</span> loreum ipsum</li>
                                    <li><span>4</span>loreum ipsum</li>
                                    <li><span>5</span> loreum ipsum</li>
                                </ul>
                            </div>
                            <!--//FEATURE LIST END-->

                            <!--BUTTON START-->
                            <div class="generic_price_btn clearfix">
                                <a class="" href="">Buy Now</a>
                            </div>
                            <!--//BUTTON END-->

                        </div>
                        <!--//PRICE CONTENT END-->

                    </div>
                </div>
                <!--//BLOCK ROW END-->

            </div>
        </section>
    </div>

    <!--------Contact-->

    <section class="contact p-3" id="cnt">

        <div class="mt-5 container d-flex justify-content-center align-items-center ">
            <h2 class="aboutus price-heading clearfix">Please let us know about your feedback:</h2>
        </div>
        <div class="mt-2 container d-flex justify-content-between align-items-center ">
            <p> <b class="bold"><i class="fa-solid fa-phone"></i> Tel:</b> +1 657 2534 90

            </p>
            <p> <b class="bold"><i class="fa-solid fa-envelope"></i> Email:</b> falanitamkani@gmail.com</p>
            <p><b class="bold"><i class="fa-solid fa-location-dot"></i> P.O. Box:</b> St. Luisenberg, Block C-3,
                Frankfurt, Germanyack</p>
        </div>

    </section>
    <footer>
        <div class="container">
            <span class="copyrights">Copyrights© reserved 2022 | Crochet For All</span>

        </div>
    </footer>
<div class="flex">
 <div class="item">

 </div>
</div>




</body>

</html>
*{
  padding: 0%;
  margin: 0%;
  font-family: "Raleway",sans-serif;
}
.flex{
  height: 0;
  width: 0;
  display: flex;
  flex-direction: row;
  align-items:center;
}
.item{
  align-self:auto;
}
.main-img{
  height: 450px;
  background-image: url(https://d2gt5azlc10ehh.cloudfront.net/news/wp-content/uploads/2019/12/CROCHETED-WORKS.jpg);
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.news-letter{
  height: 80px;
background-color: #f0eded;
}
.pricing{
  background-color: rgb(249, 237, 223);

}
.contact{
  background-color: #f0eded;
}
footer{
  background-color: #000000;
}
.copyrights{
  color: white;
}

#generic_price_table{
background-color: #f0eded;
}

/*PRICE COLOR CODE START*/
#generic_price_table .generic_content{
background-color: #fff;
}

#generic_price_table .generic_content .generic_head_price{
background-color: #f6f6f6;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{
border-color: #e4e4e4 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e4e4e4;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head span{
color: #525252;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{
  color: #414141;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{
  color: #414141;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{
  color: #414141;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .month{
  color: #414141;
}

#generic_price_table .generic_content .generic_feature_list ul li{  
color: #a7a7a7;
}

#generic_price_table .generic_content .generic_feature_list ul li span{
color: #414141;
}
#generic_price_table .generic_content .generic_feature_list ul li:hover{
background-color: #E4E4E4;
border-left: 5px solid rgb(249, 237, 223);
}

#generic_price_table .generic_content .generic_price_btn a{
border: 1px solid rgb(249, 237, 223); 
  color: rgb(249, 237, 223);
} 

#generic_price_table .generic_content.active .generic_head_price .generic_head_content .head_bg,
#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg{
border-color: rgb(249, 237, 223), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgb(249, 237, 223);
color: rgb(0, 0, 0);
}

#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head span,
#generic_price_table .generic_content.active .generic_head_price .generic_head_content .head span{
color: rgb(0, 0, 0);
}

#generic_price_table .generic_content:hover .generic_price_btn a,
#generic_price_table .generic_content.active .generic_price_btn a{
background-color: rgb(249, 237, 223);
color: rgb(3, 3, 3);
} 
#generic_price_table{
margin: 50px 0 50px 0;
  font-family: 'Raleway', sans-serif;
}
.row .table{
  padding: 28px 0;
}

/*PRICE BODY CODE START*/

#generic_price_table .generic_content{
overflow: hidden;
position: relative;
text-align: center;
}

#generic_price_table .generic_content .generic_head_price {
margin: 0 0 20px 0;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content{
margin: 0 0 50px 0;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{
  border-style: solid;
  border-width: 90px 1411px 23px 399px;
position: absolute;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head{
padding-top: 40px;
position: relative;
z-index: 1;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head span{
  font-family: "Raleway",sans-serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 2px;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag{
padding: 0 0 20px;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price{
display: block;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{
  display: inline-block;
  font-family: "Lato",sans-serif;
  font-size: 28px;
  font-weight: 400;
  vertical-align: middle;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{
  font-family: "Lato",sans-serif;
  font-size: 60px;
  font-weight: 300;
  letter-spacing: -2px;
  line-height: 60px;
  padding: 0;
  vertical-align: middle;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{
  display: inline-block;
  font-family: "Lato",sans-serif;
  font-size: 24px;
  font-weight: 400;
  vertical-align: bottom;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .month{
  font-family: "Lato",sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 3px;
  vertical-align: bottom;
}

#generic_price_table .generic_content .generic_feature_list ul{
list-style: none;
padding: 0;
margin: 0;
}

#generic_price_table .generic_content .generic_feature_list ul li{
font-family: "Lato",sans-serif;
font-size: 18px;
padding: 15px 0;
transition: all 0.3s ease-in-out 0s;
}
#generic_price_table .generic_content .generic_feature_list ul li:hover{
transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;

}
#generic_price_table .generic_content .generic_feature_list ul li .fa{
padding: 0 10px;
}
#generic_price_table .generic_content .generic_price_btn{
margin: 20px 0 32px;
}

#generic_price_table .generic_content .generic_price_btn a{
  border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
-webkit-border-radius: 50px;
  display: inline-block;
  font-family: "Lato",sans-serif;
  font-size: 18px;
  outline: medium none;
  padding: 12px 30px;
  text-decoration: none;
  text-transform: uppercase;
}

#generic_price_table .generic_content,
#generic_price_table .generic_content:hover,
#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg,
#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg,
#generic_price_table .generic_content .generic_head_price .generic_head_content .head h2,
#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head h2,
#generic_price_table .generic_content .price,
#generic_price_table .generic_content:hover .price,
#generic_price_table .generic_content .generic_price_btn a,
#generic_price_table .generic_content:hover .generic_price_btn a{
transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
} 

#generic_price_table_home{
 font-family: 'Raleway', sans-serif;
}

.text-center h1,
.text-center h1 a{
color: #7885CB;
font-size: 30px;
font-weight: 300;
text-decoration: none;
}
.demo-pic{
margin: 0 auto;
}
.demo-pic:hover{
opacity: 0.7;
}

#generic_price_table_home ul{
margin: 0 auto;
padding: 0;
list-style: none;
display: table;
}
#generic_price_table_home li{
float: left;
}
#generic_price_table_home li + li{
margin-left: 10px;
padding-bottom: 10px;
}
#generic_price_table_home li a{
display: block;
width: 50px;
height: 50px;
font-size: 0px;
}
#generic_price_table_home .blue{
background: #3498DB;
transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .emerald{
background: rgb(249, 237, 223);
transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .grey{
background: #7F8C8D;
transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .midnight{
background: #34495E;
transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .orange{
background: #E67E22;
transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .purple{
background: #9B59B6;
transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .red{
background: #E74C3C;
transition:all 0.3s ease-in-out 0s;
}
#generic_price_table_home .turquoise{
background: #1ABC9C;
transition: all 0.3s ease-in-out 0s;
}

#generic_price_table_home .blue:hover,
#generic_price_table_home .emerald:hover,
#generic_price_table_home .grey:hover,
#generic_price_table_home .midnight:hover,
#generic_price_table_home .orange:hover,
#generic_price_table_home .purple:hover,
#generic_price_table_home .red:hover,
#generic_price_table_home .turquoise:hover{
border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .divider{
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
padding: 20px;
}
#generic_price_table_home .divider span{
width: 100%;
display: table;
height: 2px;
background: #ddd;
margin: 50px auto;
line-height: 2px;
}
#generic_price_table_home .itemname{
text-align: center;
font-size: 50px ;
padding: 50px 0 20px ;
border-bottom: 1px solid #ddd;
margin-bottom: 40px;
text-decoration: none;
  font-weight: 300;
}
#generic_price_table_home .itemnametext{
  text-align: center;
  font-size: 20px;
  padding-top: 5px;
  text-transform: uppercase;
  display: inline-block;
}
#generic_price_table_home .footer{
padding:40px 0;
}

.price-heading{
  text-align: center;
}
.price-heading h1{
color: #666;
margin: 0;
padding: 0 0 50px 0;
}
.demo-button {
  background-color: #333333;
  color: #ffffff;
  display: table;
  font-size: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 50px;
  outline-color: -moz-use-text-color;
  outline-style: none;
  outline-width: medium ;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
}
.bottom_btn{
background-color: #333333;
  color: #ffffff;
  display: table;
  font-size: 28px;
  margin: 60px auto 20px;
  padding: 10px 25px;
  text-align: center;
  text-transform: uppercase;
}
.demo-button:hover{
background-color: #666;
color: #FFF;
text-decoration:none;

}
.bottom_btn:hover{
background-color: #666;
color: #FFF;
text-decoration:none;
}

@media (max-width: 320px) { 
}

@media (max-width: 767px) {
#generic_price_table .generic_content{
  margin-bottom:75px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
#generic_price_table .col-md-3{
  float:left;
  width:50%;
}

#generic_price_table .col-md-4{
  float:left;
  width:50%;
}

#generic_price_table .generic_content{
  margin-bottom:75px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
}
@media (min-width: 1200px) {
}
nav{
  position:fixed;
}

image