Remove weird black box from html header-CodePudding

Work asked me to do some work on this older app that no one really manages anymore. One thing that the client had asked for was to remove this black dot in the top right of the header:

Here is the code for that:

<div >
  <div  style="background-color: #F6861F"></div>
  <div  style="background-color: #DD1372"></div>
  <div  style="background-color: #41AD49"></div>
  <div  style="background-color: #00AAC0"></div>
  <div  style="background-color: #D32027"></div>
  <div  style="background-color: #F49AC1"></div>
  <div  style="background-color: #EBB700"></div>
  <div  style="background-color: #00ADE4">&#9632;</div>
</div>

First of all, what even is this in the last col? ■ If I remove that the entire colored row there disappears all together. How can I get rid of that black dot? Is there not a cleaner way to do this in the first place?

CodePudding user response：

<div >
  <div  style="background-color: #F6861F"></div>
  <div  style="background-color: #DD1372"></div>
  <div  style="background-color: #41AD49"></div>
  <div  style="background-color: #00AAC0"></div>
  <div  style="background-color: #D32027"></div>
  <div  style="background-color: #F49AC1"></div>
  <div  style="background-color: #EBB700"></div>
  <div  style="background-color: #00ADE4"></div>
</div>

CodePudding user response：

try like this:

<div >
  <div  style="background-color: #F6861F"></div>
  <div  style="background-color: #DD1372"></div>
  <div  style="background-color: #41AD49"></div>
  <div  style="background-color: #00AAC0"></div>
  <div  style="background-color: #D32027"></div>
  <div  style="background-color: #F49AC1"></div>
  <div  style="background-color: #EBB700"></div>
  <div  style="background-color: #00ADE4">&nbsp</div>
</div>