html的问题

不知道为什么中间多了一白条，解决不了，希望大佬帮忙。
代码如下
<!DOCTYPE html>
<html>

✊🎠☯🪶‏<head>
<style>
#header {
    background-color:black;
    color:white;🧑‍🎤‌👔🖥😭🤛
    text-align:center;
   
}
#nav {
    line-height:30px;

✍🌧🍞🐠‍

    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;              

‏👠🗝😄🤙

}
#section {
    width:350px;
    float:left;
    padding:10px;                  🧑‍🌾‍🕶🗝😅✍
}
#footer {
    background-color:black;
    color:white;
    clear:both;
👄🗺🥄❌🐖‌    text-align:center;
   padding:5px;                  
}
</style>
</head>🧑‍🚀‌👞🧬😪🤛

<body>

<div id="header">
<h1>City Gallery</h1>🧑‍⚕️‌👞🔑😒👊
</div>

<div id="nav">
London<br>
Paris<br>
👍🌕♊🐶‎Tokyo<br>
</div>

<div id="section">
<h2>London</h2>👴‍👙🩺🤐🤙
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
✊🌕🥄🚭🐥‎Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
‍👗💊☠
<div id="footer">
Copyright ? W3Schools.com
</div>

</body>

🤞🚤🔪🆘🦄‍

</html>