CSS: paragraph display inline when it shouldn't - css

Question

I'm trying to design a Card but my <p> text is somehow inline. I don't want that. I tried display: block;and other options but that doesn`t work.
I work with Bootstrap and CSS but as far as I know, this is a plain CSS question.
Here is my Html for one card:
<div class="">
<div class="card">
<img class="card-img-top" src="../../../assets/images/offer_1.jpg">
<div class="card-body text-center">
<h1>{{offer.name}}</h1>
<p>{{offer.description}}</p>
<h2>{{offer.price}}€</h2>
</div>
And here my SCSS:
$font-serif: 'Playfair Display', serif;
$font-sans-serif: 'Raleway', sans-serif;
$color_price: #F96D00;
$color_description: #b8b8b8;
.card {
border-radius: 0;
.card-body {
padding: 3rem;
h1 {
font-family: $font-serif;
font-weight: bold;
line-height: 1.45;
font-size: 26px;
}
h2 {
font-family: $font-serif;
font-weight: bold;
line-height: 1.45;
font-size: 22px;
color: $color_price;
}
p {
font-family: $font-serif;
line-height: 1.45;
font-size: 18px;
color: $color_description;
height: 100px;
}
}
}
It looks like this:
Edit: The Problem is the paragraph has a flixible width but the text inside is somehow always inline and wider then the paragraph itself.

Answer 1

You don't need to use overflow:hidden or !important on text-align: center.
You need to set a maximum width on the card element that is the parent of the P.
Look at your styles rendered in a codepen:
https://codepen.io/NeilWkz/pen/vaaMoO
The name and price are left-aligned, and the description is center aligned.
This is because you've used a helper class 'text-center' I assume this comes from some framework that you have not mentioned in your question. The helper class will not cascade down if you have alignment set on the h1 or h2 element, in that case you need to apply it to the actual element:
HTML:
<div class="">
<div class="card">
<img class="card-img-top" src="../../../assets/images/offer_1.jpg">
<div class="card-body">
<h1 class="text-center">{{offer.name}}</h1>
<p class="text-center">{{offer.description}}</p>
<h2 class="text-center">{{offer.price}}€</h2>
</div>
</div>
SCSS:
$font-serif: 'Playfair Display', serif;
$font-sans-serif: 'Raleway', sans-serif;
$color_price: #F96D00;
$color_description: #b8b8b8;
.card {
border-radius: 0;
//Added width & background color for demo
width: 320px;
background: azure;
.text-center {
text-align: center;
}
.card-body {
padding: 3rem;
display: block;
h1 {
font-family: $font-serif;
font-weight: bold;
line-height: 1.45;
font-size: 26px;
display: center;
}
h2 {
font-family: $font-serif;
font-weight: bold;
line-height: 1.45;
font-size: 22px;
color: $color_price;
}
p {
font-family: $font-serif;
line-height: 1.45;
font-size: 18px;
color: $color_description;
height: 100px;
}
}
}
Here's a working pen with the styles above:
https://codepen.io/NeilWkz/pen/gjjJpw