Why float didnt work correctly

h2 {
text-align: center;
border:5px solid green;
body {
background-size: cover;

list-style: none;
display: inline-block;

p {
font-weight: bold;
color: black;
font-family: ‘Potta One’, cursive;
background-color: rgba(0,0,255,0.2);
border:5px solid black;
text-align: center;
line-height: 70px;
font-size: 50px;
float: right;

1 Like

After some research it looks like this is a common CSS float issue, where the parent element does not expand for the float.
Here are a couple fixes I found to try:

<div id="container">
<img src="your img" width="200" height="222" alt="" />
<p> Your text </p>
  <div class="clearfix"></div>

1. .clearfix {
  clear: both;
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;

Hope this helped! :)
1 Like

It’s also said you can just float the containing parent… but can have undesireable affects on your layout. here’s the link if needing more description :slight_smile: https://www.smashingmagazine.com/2009/10/the-mystery-of-css-float-property/

1 Like