Weird div block - html

Question

I have a question about this: https://gyazo.com/1851299f16c3148c81f8e83682d38ff1
https://gyazo.com/05adf6012ba98bbae93ecda4dabbdffa
It can be a stupid question or just a stupid code. But how can i get that long block away? My logo is scaled and correct. But if i delete that long div block, then the logo unscaled, and be big.
Need advice.
Thankyou!

Answer 1

I created a few examples on jsfiddle for you.
1)
To get rid of the black bar you could do something like this:
<div class="wrapper">
<div class="Logo">
<img class="LogoNav" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/9front_logo.svg/150px-9front_logo.svg.png">
</div>
<li>Home</li>
<li>Over</li>
<li>Contact</li>
<li>bestellen</li>
</div>
example:
https://jsfiddle.net/x4912b7s/1/
2)
To move the links to the right of the logo, but still inside the black box:
.LogoNav {
width: 25%;
height: auto;
float: left;
}
example: https://jsfiddle.net/x4912b7s/2/
3) To remove the black box and move the links next to the logo:
html
<div class="wrapper">
<div class="Logo">
<img class="LogoNav" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/9front_logo.svg/150px-9front_logo.svg.png">
</div>
<li>Home</li>
<li>Over</li>
<li>Contact</li>
<li>bestellen</li>
</div>
css
.LogoNav {
width: 25%;
height: auto;
float: left;
}
example: https://jsfiddle.net/x4912b7s/3/
Hopefully this helps.