jesperdj/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Flex Navbar</title>
</head>

<body>
    <header>
        <div class="logo"><a href="/">Flex Navbar</a></div>
        <div class="space"></div>
        <nav class="nav">
            <ul>
                <li><a href="#">Products</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>Navbar with flexbox example</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos similique, animi commodi, dicta corrupti
            tenetur quibusdam nihil ea nobis adipisci provident quis iste! Architecto quae asperiores fuga eum!
            Consequuntur expedita culpa officia voluptatibus non assumenda ea maiores doloremque hic. Neque, officiis
            fuga? Obcaecati repellat molestiae quod culpa reiciendis quae numquam similique ad pariatur possimus illo
            ducimus earum ea facere accusamus unde voluptas rem corrupti labore tempora cupiditate quo eum, itaque
            voluptates? Voluptates quo, corporis earum explicabo, in quod accusantium ipsam laudantium distinctio, vero
            mollitia libero facere voluptate odit totam delectus quis! Quia eveniet veritatis reprehenderit optio
            numquam aut sit doloribus?</p>
    </main>
</body>

</html>

## style.css
body {
    margin: 0;
    padding: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

a {
    text-decoration: none;
    color: white;
}

body > header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 48px;
    overflow: hidden;

    background-color: #0048dd;
    color: white;

    box-shadow: 0 2px 4px #888888;

    display: flex;
}

.logo {
    margin: 0;
    padding: 0 1em;
    line-height: 48px; /* Centers text vertically */

    font-size: 150%;
    font-weight: bold;
}

.logo:hover {
    background-color: #1763ff;
}

.space {
    flex-grow: 1; /* Causes this element to take up the remaining space, pushing logo and nav to the left and right sides */
}

.nav {
    margin: 0;
    padding: 0;

    font-weight: bold;
}

.nav > ul {
    margin: 0;
    padding: 0;
    line-height: 48px; /* Centers text vertically */

    list-style-type: none;
}

.nav > ul > li {
    padding: 0 1em;
    display: inline-block;
}

.nav > ul > li:hover {
    background-color: #1763ff;
}

main {
    margin-top: 48px; /* Top margin as high as the navbar, to prevent content from disappearing under the navbar */
}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="style.css">
	<title>Flex Navbar</title>
	</head>

	<body>
	<header>
	<div class="logo"><a href="/">Flex Navbar</a></div>
	<div class="space"></div>
	<nav class="nav">
	<ul>
	<li><a href="#">Products</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">About</a></li>
	</ul>
	</nav>
	</header>
	<main>
	<h1>Navbar with flexbox example</h1>
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos similique, animi commodi, dicta corrupti
	tenetur quibusdam nihil ea nobis adipisci provident quis iste! Architecto quae asperiores fuga eum!
	Consequuntur expedita culpa officia voluptatibus non assumenda ea maiores doloremque hic. Neque, officiis
	fuga? Obcaecati repellat molestiae quod culpa reiciendis quae numquam similique ad pariatur possimus illo
	ducimus earum ea facere accusamus unde voluptas rem corrupti labore tempora cupiditate quo eum, itaque
	voluptates? Voluptates quo, corporis earum explicabo, in quod accusantium ipsam laudantium distinctio, vero
	mollitia libero facere voluptate odit totam delectus quis! Quia eveniet veritatis reprehenderit optio
	numquam aut sit doloribus?</p>
	</main>
	</body>

	</html>
	body {
	margin: 0;
	padding: 0;

	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	}

	a {
	text-decoration: none;
	color: white;
	}

	body > header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 48px;
	overflow: hidden;

	background-color: #0048dd;
	color: white;

	box-shadow: 0 2px 4px #888888;

	display: flex;
	}

	.logo {
	margin: 0;
	padding: 0 1em;
	line-height: 48px; /* Centers text vertically */

	font-size: 150%;
	font-weight: bold;
	}

	.logo:hover {
	background-color: #1763ff;
	}

	.space {
	flex-grow: 1; /* Causes this element to take up the remaining space, pushing logo and nav to the left and right sides */
	}

	.nav {
	margin: 0;
	padding: 0;

	font-weight: bold;
	}

	.nav > ul {
	margin: 0;
	padding: 0;
	line-height: 48px; /* Centers text vertically */

	list-style-type: none;
	}

	.nav > ul > li {
	padding: 0 1em;
	display: inline-block;
	}

	.nav > ul > li:hover {
	background-color: #1763ff;
	}

	main {
	margin-top: 48px; /* Top margin as high as the navbar, to prevent content from disappearing under the navbar */
	}