CSS Question

100% width extends past parent element

I'm using HTML and CSS to code a card-like button.

For some reason, the

width
of the text under the image always extends past the edge of the parent
div
.

I can adjust to make it relatively unnoticeable when viewing on desktop, but it becomes a real pain when it comes to viewing on mobile devices.



.card {
width: 20%;
box-shadow: 0px 0px 10px gray;
}
.card:hover {
box-shadow: 0px 0px 20px black;
}
.card-img {
width: 100%;
}
.card-title {
margin: 10px;
display: inline-block;
font-family: Open Sans;
text-align: center;
width: 100%;
}

<div class="card">
<img class="card-img" src="http://prww-weather.com/logo.png" />
<p class="card-title">Card Title</p>
</div>





Does anyone know why
card-title
extends past the edge of
card
and how I can fix it?

I think it has something to do with the
inline-block
assigned to the
card-title
class, but if I don't include that, the
margin
s of
card-title
and
card-img
collapse .

Answer

You can try this:

https://jsfiddle.net/nbLLgx5x/

.card {
    width: 20%;
    box-shadow: 0px 0px 10px gray;
}

.card:hover {
    box-shadow: 0px 0px 20px black;
}

.card-img {
    width: 100%;
    display: block;
}

.card-title {
    padding: 10px;
    font-family: Open Sans;
    text-align: center;
    margin: 0;
}
<div class="card">
    <img class="card-img" src="http://prww-weather.com/logo.png" />
    <p class="card-title">This is a very long card title</p>
</div>