Why is the margin not fitting into the div? - html

Question

My button margin isn't fitting into my div. Here's the relevant HTML and CSS.
.card {
justify-content: flex-start;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
margin: 8px;
}
.card {
margin-bottom: 16px;
padding: 0px 8px;
float: left;
}
.button {
border: none;
padding: 8px;
color: white;
background-color: black;
text-align: center;
cursor: pointer;
width: 100%;
}
.button:hover {
background-color: #555;
}
.title {
color: grey;
}
.container {
padding: 0px 16px;
}
.card > img {
width: 100%;
}
<div class="ccard">
<div class="card">
<img src="https://pbs.twimg.com/profile_images/1115280588322295808/N1mHLfHy_400x400.png" alt="Jane">
<div class="container">
<h2>Jane Doe</h2>
<p class="title">CEO & Founder</p>
<p>Jane has had 9 years of experience in the tech industry and knows it like the back of her hand. She's very warm and welcoming towards new customers.</p>
<p>janedoe#cabbagedude.com</p>
<p>
<button class="button">Contact</button>
</p>
</div>
</div>
</div>
It has always worked for me before, but it doesn't work now. I also haven't changed anything, except by adding the class ccard around card.
Here's what it looks like for me.

Answer 1

You need to add box-sizing: border-box; to all relevant elements in order to include borders and paddings (I suppose you mean those, since you don't have any margin on the button) in the given width, otherwise they are added to the width, which causes overflow if the width is 100%.