Solution 1 :

Displaying nav as flex should do the trick

nav {
  display: flex;


Problem :

I am trying to push my navbar up and align my navbar up to the label which is supposed to be the logo but I don’t know how I can do that …any help would be appreciated…here is the code:

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Verdana;

    html, body {
      height: 100%;

    .container1 {
      min-height: 100%;

    .main {
      overflow: auto;
      padding-bottom: 50px;

    div.footer>a {
      text-decoration: none;
      color: red;

    div.footer {
      background-color: black;
      color: white;
      position: relative;
      height: 50px;
      margin-top: -50px;
      clear: both;
      display: flex;
      justify-content: center;
      align-items: center;
    nav ul li a {
      text-decoration: none;
      background-color: black;
      color: white;
      font-size: 17px;
      margin: 20px;
    nav ul li {
      list-style: none;
    nav ul.navbar {
      display: flex;
      justify-content: center;
    <!DOCTYPE html>
    <html lang="en">

      <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='../Css/styles.css' </head>

        <span><label id='logo'>Logo</label></span>
        <ul class='navbar'>
          <li><a href='#' class='active'>Home</a></li>
          <li><a href='#'>Services</a></li>
          <li><a href='#'>About</a></li>
          <li><a href='#'>Contact</a></li>
      <div class='container1'>
        <div class='main'>

      <div class='footer'>
        Created by&nbsp;<a href=' 
        view_as=subscriber' target='_blank'>Precious Nyaupane</a>|&copy; 2020 All rights reserved



Comment posted by Zain Zafar

You can click on the check mark on the left side of the answer so that it can be considered as close. Thanks