Not sure what my inline block problem is?

Question

I have tried removing white space and it hasn't worked. I am trying to position the 'plans' in an inline-block, however, I have not had any luck. I have tried adjusting the height/width, font size, etc, but still no luck.

I have copied this code directly from a Udemy tutorial video, so I am really lost and not sure what is wrong. This is my first time posting a question, so if there is any advice on how to ask better perhaps, please let me know in the comments.

The problem is .plan {display: inline-block;} is not appearing to function properly in my code. (All of my styles are in a separate CSS style sheet.)

At the bottom of my HTML, I tossed it a snippet of the CSS I used in a separate style sheet as a reference.

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">    
<title></title>
</head>


<body>


<header class="main-header">
    <div>
        <a href="main.html" class="main-header_brand">
            uHost
    </div>
    <nav class="main-nav">
    <ul class="main-nav_items">
        <li class="main-nav_item"><a href="packages.html">Packages</a></li>
        <li class="main-nav_item"><a href="customers.html">Customers</a></li>
        <li class="main-nav_item main-nav__item-cta"><a href="start-hosting.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 class="section-title">Choose Your Plan</h1>
<div>
    <article class="plan">
        <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>
</div>

<div>
    <article class="plan">
        <h1>FREE</h1>
        <h2>$29/month</h2>
        <h3>For ambitious projects.</h3>
        <ul>
            <li>5 workspace</li>
            <li>Unlimited Traffic</li>
            <li>100GB Storage</li>
            <li>Plus support</li>
        </ul>
        <div>
            <button>CHOOSE PLAN</button>
        </div>
    </article>
</div>

<div>
    <article class="plan">
        <h1>FREE</h1>
        <h2>$99/month</h2>
        <h3>Your enterprise solution.</h3>
        <ul>
            <li>10 workspace</li>
            <li>Unlimited Traffic</li>
            <li>Unlimited Storage</li>
            <li>Priority support</li>
        </ul>
        <div>
            <button>CHOOSE PLAN</button>
        </div>
    </article>
</div>
    </section>

</main>


</body>

</html> 

.plan{
    display: inline-block;
    background color: lightblue;
    text-align: center;
    padding: 16px;
    margin: 8px;
    width: 25%;
    list-style: none;
    vertical-align: middle;
}

Take a look at the top-scoring question [How to remove the space between inline/inline-block elements?](https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-inline-block-elements) (and also, look into flex boxes) — AStombaugh, Jun 01 '22 at 18:00
place the class "plan" on the div's surrounding your article tags not on the article tags themselves — DCR, Jun 01 '22 at 18:04
@AStombaugh, that was the solution. I added span tags around the divs of each plan section, and then styled the spans in CSS to display inline-block and it worked. Thank you very much! — Keel, Jun 01 '22 at 18:16

score 0 · Accepted Answer · edited Jun 10 '22 at 09:45

A better way to do this is to use flex

.plan{
    display: inline-block;
    background-color: lightblue;
    text-align: center;
    padding: 16px;
    margin: 8px;
    width: calc(25% - 8px);
    list-style: none;
    vertical-align: middle;
}

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">    
<title></title>
</head>


<body>


<header class="main-header">
    <div>
        <a href="main.html" class="main-header_brand">
            uHost</a>
    </div>
    <nav class="main-nav">
    <ul class="main-nav_items">
        <li class="main-nav_item"><a href="packages.html">Packages</a></li>
        <li class="main-nav_item"><a href="customers.html">Customers</a></li>
        <li class="main-nav_item main-nav__item-cta"><a href="start-hosting.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 class="section-title">Choose Your Plan</h1>
<div class="plan">
    <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>
</div>

<div class="plan">
    <article >
        <h1>FREE</h1>
        <h2>$29/month</h2>
        <h3>For ambitious projects.</h3>
        <ul>
            <li>5 workspace</li>
            <li>Unlimited Traffic</li>
            <li>100GB Storage</li>
            <li>Plus support</li>
        </ul>
        <div>
            <button>CHOOSE PLAN</button>
        </div>
    </article>
</div>

<div class="plan">
    <article >
        <h1>FREE</h1>
        <h2>$99/month</h2>
        <h3>Your enterprise solution.</h3>
        <ul>
            <li>10 workspace</li>
            <li>Unlimited Traffic</li>
            <li>Unlimited Storage</li>
            <li>Priority support</li>
        </ul>
        <div>
            <button>CHOOSE PLAN</button>
        </div>
    </article>
</div>
    </section>

</main>


</body>

</html>

Not sure what my inline block problem is?

1 Answers1