Cool HTML header

<html>
    <head>
        <title>My Website</title>
        <style type="text/css">
            body { margin: 0;}
            div.container { margin: auto; width: 50%; padding: 10px; border: 3px solid red;}
            body header { display: inline-block; background: #333; width: 100%; padding-left: 100px;}
            body header h1 { display: inline-block; color: red; padding: 17px;}
            body header ul { display: inline-block; list-style-type: none;}
            body header ul li { display: inline-block; color: red; list-style-type: none; padding: 12px; background: black; border: 3px solid red;}
            body header ul li a { color: white;}
            body header ul li:hover { background: white;}
            body header ul li a:hover { color: red;}
        </style>
    </head>
    <body>
     <div.container>
        <header>
            <h1>My Website</h1>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Downloads</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </header>
     </div>

    </body>


</html>