HTML/CSS - Vaughan Blog v1 Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Freelance Web Development Blog">
        <meta nane="author" content="Vaughanakiem Blair">
        <meta name="viewport" content="width=device-width, initail-scale=1.0">
        <meta name="keywords" content="freelance,blog,vaughan blair, web, front end development, web developer">
        <title>Vaughan The Web Developer</title>
        <!--<link href="https:fonts.gooleapis.com/css?family=Merriweather+Sans" rel="stylesheet">-->
    </head>
    <body>
        <header id="header">
            <nav>
                <ul>
                    <li><a href="#introduction"><button>Welcome</button></a></li><li><button>About Me</button></li><li><button>Projects</button></li><li><button>Contact Me</button></li>
                </ul>
            </nav>
            <h1><span>Vaughan Blair</span></h1>
            <img alt="Vaughan Blair" class="img-circle" src="">
        </header>
        <article>
            <section id="introduction">
                <h2 class="welcome"><span>Welcome! I'm Vaughan Blair</span></h2>
<!--How do I get the datetime in line with h2?-->
                <ul class="datetime">

css

//* How do I remove the space between the nav bar and h1?*// 
//*How do I get the datetime in line with h2?*//
html {
    margin: 0;
    padding: 0;
    background: #f1f1f1;
}
body {
    font-family: "Merriweather Sans", sans-serif;
    font-size: 10px;
    /*max-width: 45em;
    min-width: 300px;
    margin: 30px auto;
    padding: 0 1.5em;*/
}
h1 {
    font-size: 50px;
    text-align: center;
    margin-top: -16px;
}
h1 span {
    border: double  grey;
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 0px;
    width: 100%;
}

BROWSER

Console