How to prevent one element from overlapping the other?

How do you prevent overlapping with other elements? In this case the title QUICK ACCESS TO MAIN CHANNELS is superimposing the element below - Monastic Sands

See example:

CSS:

p.acessorapido{
float: left;
  width: 100%;
  height: 38px;
  max-width: 885px;
  margin-top: 20px;
  padding: 8px;
  padding-left: 0px;
  font-size: 20px;
  box-sizing: border-box;
  color: #eee;
  border-bottom: 1px #C11C05 solid;
}

p.acessorapido span {
  background-color: #C11C05;
  padding:5px;
}