My CSS Padding and Margins are showing up but not declared - html

Question

I'm trying to fix my website. Problem #1 I can't push the list on the header over by using margin-left or padding-left. Problem #2 the Main Header 1 and 3 are creating there own padding. My goal is to fix the padding and bring the headers closer together and get rid of this padding/margin issue.
#hlist {
top: 10px;
margin-right: 3px;
position: relative;
height: 30px;
padding-right: -12px;
}
ul#hlist {
float: right;
list-style-type: none;
margin: 0;
overflow: hidden;
}
ul#hlist li {
float: left;
}
ul#hlist li a {
font-family: 'Poppins';
color: black;
text-align: center;
text-decoration: none;
padding: 14px 16px;
}
ul#hlist li a:hover {
border-style: solid;
border-width: 1px;
border-color: gray;
color: gray;
}
.content-wrapper {
padding: 0;
}
.text-wrapper {
height: 300px;
width: 100%;
position: relative;
margin-top: -60%;
}
.text-wrapper h1 {
text-shadow: 2px 2px black;
text-align: center;
color: #ffff;
font-size: 10vw;
}
.text-wrapper h3 {
margin-top: 10%;
text-shadow: 2px 2px black;
text-align: center;
color: #ffff;
font-size: 30px;
}
<div id="header">
<ul id="hlist">
<li>WHERE TO WATCH</li>
<li>ABOUT</li>
</ul>
<div id="logo-box">
<img style="height: 32px; padding:5px;" src="https://assets.nationalgeographic.com/styleguide/stable/logos/ng-logo-2fl.svg" alt="logo">
</div>
</div>
</header>
<div class="content-wrapper">
<image id="bg" src="https://i.imgur.com/i2MSrn7.jpg">
<div class="text-wrapper">
<h3> The Giant </h3>
<h1> Panda </h1>
</div>
<image id="ply" style="height: 32px; padding:5px;" src="images.svg">
</div>

Answer 1

Your body has margin: 8px set. That's why there's a gap around the edges. Set margin: 0 on the body tag. Check out this codepen I created. That solves the gap around the edges of the image.
I don't fully understand the second part of your question. Your page is spread out very wide due to the size of the image. Make the image smaller and so that it doesn't overflow and your site will look much better.
If you want to position the links in an easier way look into using Flexbox and doing something like this:
display: flex;
justify-content: flex-end;
Do that on your links and they should float right if that's what you're trying to do.
Also, look into using a CSS Reset. By default HTML elements come with certain CSS styles applied automatically. A reset will get rid of default styles so they don't interfere with what you're trying to do. Lots of HTML elements have default padding/margins that you may not realize.