HTML/CSS horizontal white space between divs - html

Question

I have whitespace between two html sections that I would like to get rid of. Here is a picture of it:
I removed any whitespace in my html code between /div and div, as suggested by answers from my searches, but it didn't seem to fix the problem.
HTML Code:
<!--website main heading layout-->
<div id="heading">
<h1> Beat Your Pace <h1/>
<h2> The music search tool to boost your running performance! </h2>
</div><div id="topbar">
<!--topbar/menu layout-->
<div id="topbar_wrapper">
<ul id="mainmenu">
<li>Home</li><li>
Search</li><li>
Sort By &#9660
<ul id="sortmenu">
<li><a href='#'>Song</a>
<ul class="sortsubmenu">
<li><a href='#'>A to Z</a></li><li>
<a href='#'>Z to A</a></li>
</ul>
</li><li>
<a href='#'>Artist</a>
<ul class="sortsubmenu">
<li><a href='#'>A to Z</a></li><li>
<a href='#'>Z to A</a></li>
</ul>
</li><li>
<a href='#'>Album</a>
<ul class="sortsubmenu">
<li><a href='#'>A to Z</a></li><li>
<a href='#'>Z to A</a></li>
</ul>
</li><li>
<a href='#'>Genre</a>
<ul class="sortsubmenu">
<li><a href='#'>A to Z</a></li><li>
<a href='#'>Z to A</a></li>
</ul>
</li><li>
<a href='#'>BPM</a>
<ul class="sortsubmenu">
<li><a href='#'>Slowest to Fastest</a></li><li>
<a href='#'>Fastest to Slowest</a></li>
</ul>
</li><li>
<a href='#'>Release Date</a>
<ul class="sortsubmenu">
<li><a href='#'>Newest to Oldest</a></li><li>
<a href='#'>Oldest to Newest</a></li>
</ul>
</li>
</ul>
</li><li>
Add Song</li><li>
Contact Us</li>
</ul>
</div>
</div>
body and heading CSS Code:
html, body {
margin: 0px;
padding: 0px;
font-family: Arial;
font-size: 18px;
}
#heading {
background: url("http://cdn4.techlila.com/wp- content/uploads/2011/01/header2.jpg");
background-position: left;
color: black;
text-shadow: -1px 0 #F8F8FF, 0 1px #F8F8FF, 1px 0 #F8F8FF, 0 -1px #F8F8FF;
}
Menu CSS Code:
#topbar {
background-color: #222;
}
#topbar_wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}
#mainmenu {
list-style-type: none;
padding: 0px;
margin: 0px;
position: relative;
min-width: 200px;
}
#mainmenu > li {
display: inline-block;
width: 200px;
}
#mainmenu li:hover {
background-color: #333;
}
#mainmenu li a{
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#mainmenu li:hover > ul {
display: block;
}
#sortmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#sortmenu > li {
display: block;
position: relative;
}
#sortmenu li a:hover {
color: #699;
}
#sortmenu li: hover ul {
display: inline-block;
}
.sortsubmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
top: 0;
left: 100%;
width: auto;
}
.sortsubmenu li{
display: inline;
white-space: nowrap;
}
.sortsubmenu li a:hover {
color: #DB7093;
}

Answer 1

Remove the default on the <h2> element:
#heading h2 {
margin:0;
}