katendeglory/navbar-with-flexbox.html

## navbar-with-flexbox.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar with Flexbox</title>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Open+Sans|Rajdhani|Rubik:300&display=swap');

    html {
      scroll-behavior: smooth;
      box-sizing: border-box;
      font-size: 1rem;
    }

    *,
    *::before,
    ::after {
      box-sizing: border-box;
    }

    * {
      font-family: 'Rubik', sans-serif;
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
      color: inherit;
    }
  </style>
</head>

<body>

  <nav>
    <a class="brand">Brand Logo</a>
    <ul>
      <li><a href="#">Menu-1</a></li>
      <li><a href="#">Menu-2</a></li>
      <li><a href="#">Menu-3</a></li>
      <li><a href="#">Menu-4</a></li>
    </ul>
  </nav>

  <style>
    nav {
      padding: 0px 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: palevioletred;
      color: white;
    }

    /* .brand-logo {} */

    nav ul {
      display: flex;
      justify-content: flex-end;
      /* To center in parent nav displayed as flex */
      /* margin: auto; */
    }

    nav ul a {
      display: inline-flex;
      padding: 20px 25px;
      transition: .5s;
    }

    nav ul a:hover {
      background: rgba(0, 0, 0, .05);
    }
  </style>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Navbar with Flexbox</title>
	<style>
	@import url('https://fonts.googleapis.com/css?family=Open+Sans\|Rajdhani\|Rubik:300&display=swap');

	html {
	scroll-behavior: smooth;
	box-sizing: border-box;
	font-size: 1rem;
	}

	*,
	*::before,
	::after {
	box-sizing: border-box;
	}

	* {
	font-family: 'Rubik', sans-serif;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	}

	ul {
	list-style: none;
	}

	a {
	text-decoration: none;
	color: inherit;
	}
	</style>
	</head>

	<body>

	<nav>
	<a class="brand">Brand Logo</a>
	<ul>
	<li><a href="#">Menu-1</a></li>
	<li><a href="#">Menu-2</a></li>
	<li><a href="#">Menu-3</a></li>
	<li><a href="#">Menu-4</a></li>
	</ul>
	</nav>

	<style>
	nav {
	padding: 0px 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: palevioletred;
	color: white;
	}

	/* .brand-logo {} */

	nav ul {
	display: flex;
	justify-content: flex-end;
	/* To center in parent nav displayed as flex */
	/* margin: auto; */
	}

	nav ul a {
	display: inline-flex;
	padding: 20px 25px;
	transition: .5s;
	}

	nav ul a:hover {
	background: rgba(0, 0, 0, .05);
	}
	</style>
	</body>

	</html>