HTML Nexus webpage thing

<!DOCTYPE html>
<html>
    <head>
        <title>NeXus</title>
        <link rel="stylesheet" type="text/css" href="./style.css">
    </head>
<body>
    <center>
    <div id="top_of_page">
        <img src="./logo%20black.png">
    </div>
    <div id="nav">
        <div id="nav_wrapper">
                <a href="#" id="menu">Home</a>
                <a href="#" id="menu">Bio</a>
                <a href="#" id="menu">Releases</a>
                <a href="#" id="menu">Social</a>
                <a href="#" id="menu">Merch</a>
                <a href="#" id="menu">Contact</a>
        </div>
    </div>
    <div id="article">
        <p>Have some words go here. <br /> Have some more words go here. <br /> Maybe a picture could go here <br /> Yeah, pictures! Pictures are cool, right? c: <br /> Wait, should this <em>really</em> be anchored to the left?</p>
    </div>
    <div id="article_two">
    <p>Uh... that's not quite right.</p>
    </div>
    <div id="article_three">
    <p>Ahhh... that's better. <br /> Now all I need to do is figure out how to close the gap between divs! c:<br /> (Maybe <a href="http://wingsoffirefanon.wikia.com/wiki/User:Heliosanctus" id="helio">Heliosanctus</a> knows. I'll ask him.)</p>
    </div>
    <div>
        <a href="/wiki/Fae" class="image image-thumbnail link-internal" title="Fae"> <img src="http://img4.wikia.nocookie.net/__cb20141121124711/wingsoffirefanon/images/thumb/2/26/FaeButton.png/75px-FaeButton.png" alt="FaeButton" class="" data-image-key="FaeButton.png" data-image-name="FaeButton.png" width="75" height="75"> </a>
    </div>
    </center>
    </div>
</body>
</html>