Blank spaces between vertical divs

I'm very new (as in, just the past few days) to html and css and I'm trying to create a website. I found a bunch of answers related to my question but still couldn't figure out how to fix my code and remove the white space between the divs. Any help would be super appreciated! I've included the relevant code below. Thanks!!!

<!DOCTYPE html>
<html>
<head>
<title>Budget Line of Business</title>
<style>
h1 {font-family: "Footlight MT Light";
       font-size: 52px; color: white; font-weight: bold; }
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: none;
}

li {
float: right;
}

li a {
display: block;
color: #FC4A1A;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #062f4f;
}

</style>
</head>
<body>
<div style="background-color:#f7b733;">
<ul><strong>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#ideas">Ideas</a></li>
  <li><a href="#work">Our Work</a></li>
  <li><a href="#us">About Us</a></li></strong>
</ul>
<h1><center>Let's Make Your Budget Experience Extraordinary</center></h1>
<p style="text-align: center;">SEE WHAT WE CAN DO FOR YOU</p>
<p style="text-align: center;"><strong>^ (down button)</strong></p></p>       </div>
</div>

<div style="background-color:#4abdac;">
<h1 style="text-align: left;">Making budget offices better</h1>
</div>

<div style="background-color:#fc4a14;">
<h1 style="text-align:right;">Learn All About Budget</h1>
</div>

<div style="background-color:#062f4f;">
<h1 style="text-align: left;">We Make Technology Accessible</h1>
</div>

<div style="background-color:#DFDCE3;">
<h1 style="text-align:right;">Grow Your Career</h1>
</div>

</body>
</html>

Solution

The p and h1 elements has default margin, which adds the white-space you see between the DIVs. You can remove this margin (by set it to 0) and this way there will be no white-space between the divs:

p {
  margin: 0;
}
h1{ 
  margin: 0;
}

Here is a working example:

h1 {font-family: "Footlight MT Light";
       font-size: 52px; color: white; font-weight: bold; }
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: none;
}

li {
float: right;
}

li a {
display: block;
color: #FC4A1A;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #062f4f;
}
p {
  margin: 0;
}
h1{ 
  margin: 0;
}

<div style="background-color:#f7b733;">
  <ul><strong>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#ideas">Ideas</a></li>
    <li><a href="#work">Our Work</a></li>
    <li><a href="#us">About Us</a></li></strong>
  </ul>
  <h1><center>Let's Make Your Budget Experience Extraordinary</center></h1>
  <p style="text-align: center;">SEE WHAT WE CAN DO FOR YOU</p>
  <p style="text-align: center;"><strong>^ (down button)</strong></p>
</div>

<div style="background-color:#4abdac;">
  <h1 style="text-align: left;">Making budget offices better</h1>
</div>

<div style="background-color:#fc4a14;">
  <h1 style="text-align:right;">Learn All About Budget</h1>
</div>

<div style="background-color:#062f4f;">
  <h1 style="text-align: left;">We Make Technology Accessible</h1>
</div>

<div style="background-color:#DFDCE3;">
  <h1 style="text-align:right;">Grow Your Career</h1>
</div>

Note that you also had some elements in your code that shouldn't be there, I removed them to make the html correct.