HTML - First Text in div will not be pushed down - html

Question

I have an h1 tag in a div, and I would like for it to be pushed down from right up to the top of the div. I have tried adding a top margin on the h1 but that doesn't help. When I put some text in the div '#contact', Suddenly the h1 moves down. Is there a way to move the h1 down without text in '#contact'? Thank you in advance.
Snippet:
<div style="float:left; margin: 0; width: 100%;background-color:#eeeeee;font-size: 20px;color: #252a30;text-align: center;">
<style>
.half {
width: 40%;
margin: 3%;
font-size: 0.7em;
display: block;
}
.hl {
text-align: left;
float: left;
}
.hr {
text-align: right;
float: right;
}
.project-tags {
color: #b2c6cd;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 1px;
opacity: 1;
text-transform: uppercase;
}
.half ul, .half h1 {
margin-bottom: 0px;
margin-top: 0px;
}
.half h1 {
margin-bottom: 5px;
}
.project-tags li {
color: #fed766;
}
.project-tags span {
color: #b2c6cd;
}
.half p {
font-weight: 300;
font-size: 20px;
}
.button-primary {
margin: 10px 0 60px;
color: #252a30;
background-color: rgba(0, 0, 0, 0);
border: 2px solid #FED766;
height: auto;
font-size: 1rem;
line-height: normal;
text-transform: uppercase;
font-weight: 700;
transition: all .3s ease-in-out;
letter-spacing: 0;
border-radius: 50px;
display: inline-block;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-sizing: border-box;
outline: 0;
padding: 1.0rem 3.0rem;
}
.button-primary:hover {
color: #FED766;
background-color: #252a30;
border: 2px solid #252a30;
padding: 1.0rem 3.5rem;
}
.on-ylw {
border: 2px solid #252a30;
}
</style>
<p id="projects"></p>
<h1>My Projects</h1>
<p style="font-weight: 300;">Examples of my work</p>
<div class="projects" style="margin: 0 15%;">
<div class="half hl">
<h1>Text</h1>
<ul class="project-tags">
<li><span>Python</span></li>
</ul>
<p>Text</p>
Visit Website
</div>
<div class="half hr">
<img src="image" alt="link" style="border-radius: 10px;position: relative: width: 100%; border-style: none;">
</div>
</div>
</div>
<div style="margin: 0; width: 100%; background-color: #FED766;position: static;">
<div id="contact"></div>
<br>
<br>
<h1 style="text-align: center; font-weight: bold; color: #000000; font-size: 40px;">Want To Contact Me</h1>
<p style="text-align: center; font-weight: 300; font-size: 25px; color: #000000;">I'm currently accepting new projects and would love to hear about yours.</p>
<br>
<button class="button-primary on-ylw" style="display: table; margin: 0 auto;">Contact Me</button>
<br>
<br>
</div>

Answer 1

Add:
clear: both;
property to the <div> that the h1 is in.
The div up the DOM you have float: left; therefore it's not actually in the dom where you'd expect.
Then you should be able to add marign-top to the H1 as expected.