Custom banner overlapping the page

Question

I am trying to add a custom banner to the SharePoint Online Page (Classic experience). Unfortunately, the banner is overlapping other elements of the page.

This is what I am doing:

1. Created the code in notepad and saved it as .txt
2. Uploaded .txt to "Documents" library
3. Added .txt via the Content Editor Web Part

<div class="container">
  <img src="/sites/XXXX/XXX/testclassic/SiteAssets/SitePages/Home/TEST BANNER.png" width="100%">
  <div class="centerleft">TEST TEXT TEST TEXT TEST TEXT TEST TEXT</div>
</div>
<style>
.container {
  position: relative;
  text-align: center;
  color: white;
}

.centerleft {
  position: absolute;
  top: 50%;
  left: 16px;
}
</style>

Output:

Answer 1

Ok, I managed to fix this. Surprisingly, I just had to change the names of the selectors to something more unique:

<div class="bannersp">
  <img src="/sites/XXXX/XXX/testclassic/SiteAssets/SitePages/Home/TEST BANNER.png" style="width:100%;">
  <div class="bannertext">TEXT TEXT TEXT</div>
<style>
.bannersp {
  position: relative;
  text-align: center;
  color: white;
}

.bannertext {
  position: absolute;
  top: 50%;
  left: 16px;
}
</style>