Element error

I am getting this Error when creating an element with the code below: This element needs a location set within the Display Rules tab in order to display.

This code worked fine in a sidebar widget but was creating other unrelated problems, so I thought I'd do it as an element. Any ideas?

<div class="desktop-logo-row">
<div class="desk-divwithin">
<img src="http://ux0.088.myftpupload.com/wp-content/uploads/2021/06/Nobackground.png"  alt="big blue logo" width="300" height="355" class="desktop-logo-tester" style="width:150px;height:178px;">
</div>
</div>
<style>
    @media (max-width: 980px){
  .desktop-logo-row{
    display:none !important;
  }
  }

 .desktop-logo-tester{
  opacity: 1;
}

  .desktop-logo-tester:hover{
  opacity: 0.5;
}
    @media  (min-width: 980px){
      .desktop-logo-row{
      margin-top: 182px!important;
    margin-left: 110px!important;
		width: 200px;
      }}
        @media (min-width: 980px) {
    .content-area, .footer-widgets{
        margin-left: 300px;
    }
					
 @media (min-width: 980px){
  .desk-divwithin{
margin: -35px 0 0 -35px;

  }
  }

				@media  (min-width: 980px){
    .inside-left-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: 300px;
        z-index: -10;
        height: 100%;
        overflow: auto;
        overflow-x: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-overflow-scrolling: touch;
        transition: .1s ease;
    }

				}
	
</style>