Issue with <p></p> in Bootstrap 4, HTML, and CSS - html

Question

I try to have multiple p tags in a division, but the paragraphs aren't separating and are just bunching together. The applicable code is as follows:
<div class="row">
<div class="col-md-12 d-flex justify-content-center padding-top">
<p>IMPORTANT LEGAL DISCLAIMER FOR TESTIMONIALS, RISK AND TYPICAL RESULTS, AS WELL AS REFUNDS</p>
<p>Test</p>
</div>
</div>
and the link to codeply is https://www.codeply.com/go/cJ37oz9g4Q. If you go to codeply, then you'll see that "Test" appears immediately after the word "REFUNDS". I have tried modifying the code, looking for known issues, etc.
How can I fix this?

Answer 1

You need to remove d-flex class from this code:
<div class="col-md-12 justify-content-center padding-top">
<p>IMPORTANT LEGAL DISCLAIMER FOR TESTIMONIALS, RISK AND TYPICAL RESULTS, AS WELL AS REFUNDS</p>
<p>Test</p>
</div>

Answer 2

This is because of d-flex class - it forces <p> to become flex-items and by default they align themself along horizontal axis. Replace d-flex and justify-content-center with text-center
.social {
margin: 0;
padding: 0;
}
.social ul {
margin: 0;
padding: 5px;
}
.social ul li {
margin: 5px;
list-style: none outside none;
display: inline-block;
}
.social i {
width: 40px;
height: 40px;
color: #FFF;
background-color: #909AA0;
font-size: 22px;
text-align:center;
padding-top: 12px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}
.social i:hover {
color: #FFF;
text-decoration: none;
transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}
.social .fa-facebook:hover {
background: #4060A5;
}
.social .fa-twitter:hover {
background: #00ABE3;
}
.social .fa-instagram:hover {
background: #375989;
}
.social .fa-youtube:hover {
background: #FF1F25;
}
.social .fa-youtube-play:hover {
background: #DF192A;
}
p {
color: #FFF;
}
.paddding-top {
padding-bottom: 15px;
padding-top: 18px;
border-bottom: 1px solid white;
}
/*this is the padding for the form from the top*/
.padding-form-top{
padding-top: 18px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="bg-inverse">
<div class="row">
<div class="col-md-12 d-flex justify-content-center">
<div class="social">
<ul>
<li><i class="fa fa-lg fa-instagram"></i></li>
<li><i class="fa fa-lg fa-facebook"></i></li>
<li><i class="fa fa-lg fa-twitter"></i></li>
<li><i class="fa fa-lg fa-youtube"></i></li>
</ul>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12 text-center padding-top">
<p>IMPORTANT LEGAL DISCLAIMER FOR TESTIMONIALS, RISK AND TYPICAL RESULTS, AS WELL AS REFUNDS</p>
<p>Test</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12 d-flex justify-content-center">
<div class="col-md-4 col-md-offset-4 text-center padding-form-top">
<form class="form-width">
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Your Email Address">
</div>
<button type="submit" class="btn btn-success">Sign Up for the Latest Updates</button>
</form>
</div>
</div>
</div>
</footer>