Align Header to top of page

For some reason, my header has a space above it. The space is filled with the background image, so I know it’s not a browser issue…

The CSS shows no borders, margins, or anything I can think of. How can I make my header align to the top AND stretch all the way across the page?

The website is thinkinkutah.com/whyrefill

Here’s my code:

<div id="the_box">
	<div class="box_header">
		<h1 style="font-size:275%;">Why Refill?</h1>
	</div>
	<div class="socialicons">
		<a href="https://www.facebook.com/pages/Think-Ink/117686411624871"><img width="48" height="48" alt="Think Ink Utah Facebook" src="https://www.thinkinkutah.com/wp-content/uploads/2013/07/facebook.gif"></a>
		<a href="https://www.youtube.com/channel/UCEzOQf-sVfAFyNHqsYXNiZg?feature=watch"><img width="48" height="48" alt="Think Ink Utah Youtube" src="https://www.thinkinkutah.com/wp-content/uploads/2013/07/youtube_icon1.png"></a>
	</div>
</div>

and my CSS:

body {
   background-image:url('https://www.thinkinkutah.com/wp-content/uploads/2013/07/FullBackgroundGrade.png');
   background-size:100% 100%;
   background-repeat:no-repeat;
}
#the_box {
  background-color: yellow;
  width: full;
}
.box_header {
  font-weight: 600;
  color: #000000;
  background-color: yellow;
  text-align: center;
  margin: auto;
  height: 30px;
}
.box_text {
  text-align: left;
}
#socialicons {
   float: right;
   align: right;

I also can’t get my social media icons to jump to the right side of the header, and sit above the quotes below (not al the way to the edge)