Floating somewhere? Time to clear your mind, ups... your div

I don't know if you have realized already that when floating elements those are not part anymore of the normal flow, meaning that if its parent element is part of the normal workflow but its child are not (because are floats for example) these are not even being consider as part of the sizing of the parent... and the pain starts when subsequent elements start getting "inline" with the children of the previous parent element.

There are two actions (mentioned in no particular order) you could take from here to avoid that, the first one is to apply some "clearance" where you can ensure that clearance is applied to the right, left, or both. And if there are any elements it will go straight to the next line.

The CSS propery to apply clearance is clear, and it looks like this on CSS:

.colorbox-p{
    float: right;
    clear: both;
}

It will basically ensure that there are no other sibling elements in line with it neither to the right or the left. 

The second is to make use of overflow, as you can see in MDN it says:

Using overflow with a value other than visible (the default) creates a new block formatting context. This is necessary for technical reasons — if a float intersected with the scrolling element it would forcibly rewrap the content after each scroll step, leading to a slow scrolling experience.

By creating a new block formatting context it floating children start being considered when rendering the size of the element, and for use that is very useful when things start getting overlapped.

An example would be:

.header {
    border-bottom: 5px solid #7d97ad;
    min-height: 56px;
    transition: min-height 0.3s;
    overflow: auto;
    padding: 20px;
}

I encourage you to try this out by your self, if you want to use the overflow example in my case I just created something like this:

<header class="header">
  <div class="header__inner">
    <img class="header__logo" src="images/round_small.png" alt="Diego's logo">
    <h1 class="header__title">Diego Marciano</h1>
  </div>
</header>

Where children had the following CSS properties:

.header__inner {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.header__logo {
    height: 72px;
    margin-right: 1em;
    vertical-align: top;
    margin-top: 12px;
    float: left;
}

.header__title {
    font-weight: 300;
    font-size: 2em;
    margin: 0.5em 0.25em;
    display: inline-block;
    color: #212121;
    float: right;
}

Try using that and using different values on the overflow property from the parent element.