class class not getting implemented-CodePudding

i am not able to get my CSS class attributes implemented on the website though i checked it multiple times to find out the error but not able to get it.

the first thing is that i am not getting the color that i mentioned in the .plan class and also the display:inline-block isn't showing its result on the website

*{
    box-sizing: border-box;
}

body{
    font-family: 'Twinkle Star', cursive;
    margin: 0;
    box-sizing: border-box;
}

#product-overview {
    background: url("freedom.jpg");
    width: 100%;
    height: 528px;
    padding: 10px;
}

.section-title{
    color: #2ddf5c;
    text-align: center;
     /* font-family: inherit; */
}

#product-overview h1{
    color: black;
    font-family: 'Noto Sans', sans-serif;
}  

.plan {
    background: color #d5ffdc;
    text-align: center;
    padding: 16px;
    margin: 5px;
    display: inline-block;
    width: 30%;
    vertical-align: middle;
}


/* h1{
    fonnt-family: serif;
} */

.main-header {
    width: 100%;
    background: #2ddf5c;
    padding: 8px 16 px;

}

.main-header > div{
    display: inline-block;
    vertical-align: middle;
}

.main-header__brand{
    color: #0e4f1f;
    text-decoration: none;
    font-weight: bold;
    font-size: 22px;
   
}

.main-nav{
    display: inline-block;
    text-align: right;
    width: calc(100% - 74px);
    display: inline-block;
    vertical-align: middle;
}

.main-nav__items{
    margin: 0;
    padding: 0;
    list-style-type: none;

}

.main-nav__item{
    display: inline-block;
    margin:  0 26px;

}

.main-nav__item a{
    text-decoration: none;
    color: #0e4f1f;
    font-weight: bold;
    padding: 3px 0;
    
}

/* .main-nav__item a::after{
    content: " (link)";
    color: red;

} */

.main-nav__item a:hover,
.main-nav__item a:active
{
    color: white;
    border-bottom: 5px solid white;
}

/* .main-nav__item a:active{
    color: white;
} */

/* p::first-letter{
    color: red;
    font-size: 20px;
} */

.main-nav__item--cta a{
    color: white;
    background:#ff1b68;
    padding: 8px 16px;
    border-radius:8px;

}

.main-nav__item--cta a:hover,
.main-nav__item--cta a:active{
    color: #ff1b68;
    background: white;
    border: none;

}

<!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>main</title>
    <link rel="Shortcut icon" href="ap.jpg">
    <style>
        
        @import url('https://fonts.googleapis.com/css2?family=Vujahday Script&display=swap');
        </style>
        <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto Sans:ital@1&display=swap');
        </style>
            </style>
    <link rel="stylesheet" href="main.css">
</head>
<body>

    <header >
        <div>
        <a href="index.html"  >
            uHost</a>
        </div><nav >
            <ul >

                <li >
                    <a href="packages/index.html">Packages</a>
                </li>
                <li >
                    <a href="customers/index.html">Customers</a>
                </li>
                <li >
                    <a href="start-hosting/index.html">start-hosting</a>
                </li>

            </ul>
        </nav>
    </header>

    <main>
        <section id="product-overview">
            <h1>Get the freedom you deserve.</h1>
        </section>
        <section id="plans">
            <h1 >
                Choose your plan
            </h1> 
            <div>
                <article >
                    <h1>FREE</h1>
                    <h2>$0/month</h2>
                    <h3>For hobby projects or small teams.</h3>
                    <ul>
                        <li>1 workspace</li>
                        <li>Unlimited Traffic</li>
                        <li>10GB Storage</li>
                        <li>Basic Support</li>
                    </ul>
                    <div>
                        <button>CHOOSE PLAN</button>
                    </div>
                </article>
                <article >
                    <h1>RECOMMENDED</h1>
                    <h1>PLUS</h1>
                    <h2>$29/MONTH</h2>
                    <h3>for ambitious projects</h3>
                    <ul>
                        <li>5 Workspaces</li>
                        <li>Unlimited Traffic</li>
                        <li>100GB Storage</li>
                        <li>Plus Support</li>
                    </ul>
                    <div>
                        <button>CHOOSE PLAN</button>
                    </div>
                <article >
                    <h1>PREMIUM</h1>
                    <h2>$99/month</h2>
                    <h3>Your enterprise solution</h3>
                    <ul>
                        <li>10 Workspaces</li>
                        <li>Unlimited Traffic</li>
                        <li>Unlimited Storage</li>
                        <li>Priority Support</li>
                    </ul>
                    <div>
                        <button>CHOOSE PLAN</button>
                    </div>
                </article>    


                </article>
            </div>
            <p>make sure you make the most of your money</p>
        </section>
    </main>
    
</body>
</html>

CodePudding user response：

The first thing I noticed in your code is that in your .plan class you wrote background: color #d5ffdc; which is not a CSS property. It should be: background-color: #d5ffdc;

Secondly, you have added a section with plan class within another one, causing the nesting of elements that are supposed to be on the same level.

Here is the corrected code.

* {
  box-sizing: border-box;
}

body {
  font-family: 'Twinkle Star', cursive;
  margin: 0;
  box-sizing: border-box;
}

#product-overview {
  background: url("freedom.jpg");
  width: 100%;
  height: 528px;
  padding: 10px;
}

.section-title {
  color: #2ddf5c;
  text-align: center;
  /* font-family: inherit; */
}

#product-overview h1 {
  color: black;
  font-family: 'Noto Sans', sans-serif;
}

.plan {
  background-color: #d5ffdc;
  text-align: center;
  padding: 16px;
  margin: 5px;
  display: inline-block;
  width: 30%;
  vertical-align: middle;
}


/* h1{
    fonnt-family: serif;
} */

.main-header {
  width: 100%;
  background: #2ddf5c;
  padding: 8px 16 px;
}

.main-header>div {
  display: inline-block;
  vertical-align: middle;
}

.main-header__brand {
  color: #0e4f1f;
  text-decoration: none;
  font-weight: bold;
  font-size: 22px;
}

.main-nav {
  display: inline-block;
  text-align: right;
  width: calc(100% - 74px);
  display: inline-block;
  vertical-align: middle;
}

.main-nav__items {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.main-nav__item {
  display: inline-block;
  margin: 0 26px;
}

.main-nav__item a {
  text-decoration: none;
  color: #0e4f1f;
  font-weight: bold;
  padding: 3px 0;
}


/* .main-nav__item a::after{
    content: " (link)";
    color: red;

} */

.main-nav__item a:hover,
.main-nav__item a:active {
  color: white;
  border-bottom: 5px solid white;
}


/* .main-nav__item a:active{
    color: white;
} */


/* p::first-letter{
    color: red;
    font-size: 20px;
} */

.main-nav__item--cta a {
  color: white;
  background: #ff1b68;
  padding: 8px 16px;
  border-radius: 8px;
}

.main-nav__item--cta a:hover,
.main-nav__item--cta a:active {
  color: #ff1b68;
  background: white;
  border: none;
}

<header >
  <div>
    <a href="index.html" >
            uHost</a>
  </div>
  <nav >
    <ul >

      <li >
        <a href="packages/index.html">Packages</a>
      </li>
      <li >
        <a href="customers/index.html">Customers</a>
      </li>
      <li >
        <a href="start-hosting/index.html">start-hosting</a>
      </li>

    </ul>
  </nav>
</header>

<main>
  <section id="product-overview">
    <h1>Get the freedom you deserve.</h1>
  </section>
  <section id="plans">
    <h1 >
      Choose your plan
    </h1>
    <div>
      <article >
        <h1>FREE</h1>
        <h2>$0/month</h2>
        <h3>For hobby projects or small teams.</h3>
        <ul>
          <li>1 workspace</li>
          <li>Unlimited Traffic</li>
          <li>10GB Storage</li>
          <li>Basic Support</li>
        </ul>
        <div>
          <button>CHOOSE PLAN</button>
        </div>
      </article>
      <article >
        <h1>RECOMMENDED</h1>
        <h1>PLUS</h1>
        <h2>$29/MONTH</h2>
        <h3>for ambitious projects</h3>
        <ul>
          <li>5 Workspaces</li>
          <li>Unlimited Traffic</li>
          <li>100GB Storage</li>
          <li>Plus Support</li>
        </ul>
        <div>
          <button>CHOOSE PLAN</button>
        </div>
      </article>
      <article >
          <h1>PREMIUM</h1>
          <h2>$99/month</h2>
          <h3>Your enterprise solution</h3>
          <ul>
            <li>10 Workspaces</li>
            <li>Unlimited Traffic</li>
            <li>Unlimited Storage</li>
            <li>Priority Support</li>
          </ul>
          <div>
            <button>CHOOSE PLAN</button>
          </div>
        </article>
    </div>
    <p>make sure you make the most of your money</p>
  </section>
</main>

CodePudding user response：

instead of display:inline-block on class .plan , use display: flex on id #plans