so i have been learning html and CSS from a guy called mosh Hamedani. In his course he was building a website and in that website he is using card component to display the prices of plans. now here is the problem as you can see in the code below there is an element with plan class and i applied max-width: 500px; and margin: 0 auto; to it in a 710px wide screen and what happened was that the card kind of became squeezed kind of like an inline element taking enough space for its content, its width is supposed to be 500px unless the viewport is less than 500px but the width was 364px and one more thing i couldn't see the margin applied to it in the box model of chrome dev tools(is this possible or some kind of glitch). now when i applied the same code the element with card class, the width was exact 500px and i could see the margin applied to it in the dev tools. how is this working, can anyone explain me? Here is the link to the full code, codepen. i was able to see this using toggle pesticide extension on chrome.
<section class="block container block-plans">
<div class="grid grid--cols-3">
<div class="plan">
<div class="card card--secondary">
<header class="card__header">
<h3 class="plan__name">Entry</h3>
<span class="plan__price">$14</span>
<span class="plan__billing-cycle">/month</span>
<span class="badge badge--secondary badge--small">10% OFF</span>
<span class="plan__description">East start on the cloud </span>
</header>
<div class="card__body">
<ui class="list list--tick">
<li class="list__item">Unlimited Websites</li>
<li class="list__item">Unlimited Bandwidth</li>
<li class="list__item">100 GB SSD Storage</li>
<li class="list__item">3 GB RAM</li>
</ui>
<button class="btn btn--outline btn--block">Buy Now</button>
</div>
</div>
</div>
</div>
</section>
i have tried asking many questions and in many ways to bard, various methods to find the answer, tried relearing how grid works.