Newbie to CSS requesting help

So I am using the following code on my website for a header:

<div class="headrow"> <div class="headcol-1"> <img src="../Images/LipstickLesbianPrideFlag.jpg" alt="Lipstick Lesbian Pride flag" />
</div>

 <div class="headcol-2"> LGBTQ Media List - Lesbian Media - A </div> <div class="headcol-3"> <img src="../Images/LipstickLesbianPrideFlag-r.jpg" alt="Lipstick Lesbian Pride flag" /> </div> </div> 

The CSS for this is:

.headrow { display: block; width: 100%; margin: 0 auto; max-width: 1366px; }

.headrow::after { display: block; height: 0; content: ""; clear: both; }

.headcol-1 {
float: left; display: block; }

.headcol-2 {
display: block; font-size: 35px; font-weight: bold; text-align: center; color: #FF0000; margin-top: 15px; }

.headcol-3 { float: right; display: block; }

The issue is seen here when I try and test it.

Some help as why this is not showing on the same like would be wonderful. :)

Epic visual tool

Epson 5030UB 2D/3D 1080p 3LCD Projector Submitted April 04, 2016 at 02:25AM by shinytrina http://ift.tt/1Y9AbtE