Solution 1 :

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;

Solution 2 :

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

body { margin: 0; padding: 0;}

Problem :

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.

Enter image description here

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>
            <Link to="/">All Meetups</Link>
            <Link to="/new-meetup ">Add new Meetups</Link>
            <Link to="/favorites">My Favorites</Link>

export default MainNavigation;


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 {
  color: white;

And the output I expect is like this:

Enter image description here


Comment posted by MOHIT RANA

and how do i increase its height also in the white part i too want to add a color for better gradient.

Comment posted by Rishit

Which element’s height?