I've been trying to get my image to float to the left of my text, but using the float property doesn't seem to be working. I want the image to align to the right of the text within a div. This is the code I currently have:
<div class="say-hello">
<img src="images/say-hello.jpg" alt="Person placing macarons on top of cake">
<div class="say-hello-text">
<h2>Say Hello</h2>
<p>In the mood for something sweet? We'd love to make your next event special with something Positively Delicious. Whether you're looking for a classic birthday cake or a unique cupcake assortment, we've got you covered.</p>
<div class="say-hello-button">
<a class="button" href="#">Contact us</a>
</div>
</div>
</div>
.say-hello {
width: 80%;
max-width: 100%;
height: 100%;
padding: 30px;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-radius: 8px;
}
.say-hello img {
object-fit: cover;
width: 50%;
border: none;
float: right;
padding: none;
margin-left: 0;
margin-right: 0;
}
.say-hello-text {
text-align: center;
align-self: center;
width: 40%;
padding-right: 4%;
float: left;
}