In my project i want my navbar to full 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 only css 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

CodePudding user response：

The body had margin and padding, that's why the result is as shown. The following code will work-

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

CodePudding user response：

To make your navigation bar to fully stretch, do this in your css :-

body { margin: 0; padding: 0;}