Can't get floated logo to display

I've created a Page Hero with merged header with the following element class name: header_element

Here is the code for the element:

<div class=fp_logo></div>
	<div class=fp_description>
			<h2> PRINCE EDWARD ISLAND'S</h2>
			<h1> HOME, AIRBNB, & SMALL OFFICE CLEANING SERVICE </h1>
			<p>A more modern, efficient approach to cleaning. Book an appointment <b>in 60 sconds</b> to learn how.</p>
	</div>

header_elements is the parent container
fp_log is a container for the logo.
fp_description a container for the descriptive text

CSS:

/*Make sure header_element is 100% width */
.header_element{
	width: 100% !important;
}
/* Float logo to the left: */
.fp_logo{
	background-image: url("http://localhost:8080/spectraclean/wp-content/uploads/2019/01/headerlogonew.png");
	background-repeat: no-repeat;
	float:left;
}
/*Styling for fp_description container */
.fp_description{
	text-align: center;
	width: 50%;
	margin: 0 auto;
	padding-top: 100px;
}

I cannot get the logo to display with float left. I've confirmed the URL for the image is correct.

Here is a pic of what the header currently looks like and where I would like the logo to be positioned:

[img]https://i.imgur.com/fGUdc7h.png[/img]