The body had margin and padding, and that’s why the result is as shown.

The following code will work—

body {
  padding: 0px;
  margin: 0px;
}

To make your navigation bar fully stretch, do this in your CSS part:

body { margin: 0; padding: 0;}

In my project I want my navbar to fully stretch to its end and increase its height. This navbar is not full stretched. Also, I want my logo would come before react meetup and in the white it should come offwhite.

All routing are perfectly fine and only the CSS part is needed.

import { Link } from "react-router-dom";
import classes from "./MainNavigation.module.css";

function MainNavigation() {
  return (
    <header className={classes.header}>
      <div className={classes.logo}>React Meetup</div>
      <nav>
        <ul>
          <li>
            <Link to="/">All Meetups</Link>
          </li>
          <li>
            <Link to="/new-meetup ">Add new Meetups</Link>
          </li>
          <li>
            <Link to="/favorites">My Favorites</Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}

export default MainNavigation;

CSS

header {
  display: flex;
  justify-content: space-between;
  padding: 30px 10;
  background-color: #24252a;
  padding: 30px 10;
}

.logo {
  font-size: 2rem;
  color: white;
  font-weight: bold;
}

.header ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: baseline;
}

.header li {
  margin-left: 3rem;
}

.header a {
  text-decoration: none;
  font-size: 1.5rem;
  color: #edf0f1;
}

.header a:hover,
.header a:active,
.header a.active {
  color: white;
}

And the output I expect is like this: