Position issues after converting a page from html to php - php

Question

I'm having a issue when converting my .html page into .php when I do so, one of the elements jumps from it's position.
(Note: the following links to the images will not work if you do not delete one of the extra dots before the png extension I'm sorry that I have to do it this way it's just that I'm new here in the site and I still have a low reputation to post pictures, I really need help)
This is how I want it to be and how it displays in the .html page
But this is how it turns out after converting to .php
Thanks in advance!
<div class="top-headlines">
<ul class="th-content">
<a href="#"><li><img src="publicidade/002.jpg" /><h1> Getting
freelance jobs is very common</h1> amongst designers and programmers. It gives you the
freedom to use your time the way you wish to and also to work on projects that you
like. But, the problem often arises in finding ample freelance jobs to sustain yourself.
Not to worry though. Here’s a list of 10 different websites where programmers and designers
can find freelance jobs. So, if you have been looking for such jobs, take a look.</li></a>
<a href="#"><li id="top-left"><img src="publicidade/004.jpg" />
<h1>Getting freelance jobs is very common</h1> amongst designers
and programmers. It gives you the freedom to use your time the way you wish to and
also to work on projects that you like. But, the problem often arises in finding ample
freelance jobs to sustain yourself. Not to worry though. </li></a>
</ul>
</div>
.top-headlines h1{
margin-bottom: 10px;
font-family: arial, tahoma, sans-serif;
font-size: 1.5em;
font-style: normal;
font-variant: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 0.01em;
}
.top-headlines{
float:left;
clear:both;
height: 100%;
min-height: 320px;
max-height: 420px;
text-align:justify;
font-family: arial, sans-serif;
font-size: 16px;
}
.top-headlines a{
text-decoration:none;
text-align:justify;
font-family: arial, sans-serif;
font-size: 18px;
color: black;
font-size: 1em;
font-weight: 200;
line-height: 1.5em;
}
.top-headlines a:hover{
color: #666666;
}
.top-headlines img{
width: 275px;
height: 170px;
}
.th-content li{
float:left;
width:500px;
height:315px;
margin-right: 10px;
border-right: 1px #999999 solid;
padding-right: 10px;
list-style:none;
}
.th-content img{
float:left;
margin-right: 5px;
margin-bottom: 5px;
}
#top-left{
width:450px;
clear:right;
border:none;
}

Answer 1

Make .top-headlines have display: inline-block.

Answer 2

Try adding these properties:
.top-headlines {
position:relative;
}
.th-content li{
width:50%;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
Codepen for illustration. Images don't load but it shows the positioning:
http://codepen.io/jwktje/pen/kFJpy