Why float didnt work correctly

[a.saleh]

h2 {
color:White;
text-align: center;
border:5px solid green;
}
body {
background-image:url(“https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4wHfx?ver=239e”);
background-size: cover;
}

li{
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;
}
img{
float: right;
}

[pamelag23]

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>
</div>

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

Hope this helped! :)

[pamelag23]

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 https://www.smashingmagazine.com/2009/10/the-mystery-of-css-float-property/