Untitled

<!doctype html>
<html>

<head>
    <title>Simple Html5 Structure</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="styles.css" />

    <style>
    </style>

</head>

<body>
    <header class="page-header">

        <nav class="site-nav-menu">
            <ul class="site-nav-menu__root">
                <li class="site-nav-menu__item">
                    <a href="#">Home</a>
                </li>
                <li class="site-nav-menu__item">
                    <a href="#">Contact</a>
                </li>
                <li class="site-nav-menu__item">
                    <a href="#">About</a>
                </li>
            </ul>
        </nav>
    </header>

    <main>
        <article></article>
    </main>

    <footer>
        <div class="footer__copyright">
            © Copyright 2019
            <strong>Acme Ltd</strong>
        </div>
    </footer>
</body>

</html>

html,
body {
    height: 100%;
    font-family: 'Roboto', sans-serif;
    padding: 0;
    margin: 0;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    min-height: 100%;
}

ul {
    margin: 0;
    padding: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}

main {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

ul,
li {
    display: inline-block;
}

body {
    display: flex;
    flex-direction: column;
}

header {
    left: 0;
    right: 0;
    background-color: red;
    padding-left: 3em;
    padding-right: 3em;
    width: 100%;
}

footer {
    left: 0;
    right: 0;
    background-color: blueviolet;
    width: 100%;
}

/* force bigger width */
ul {
    width: 400px;
}