How can I make top navbar take 100% of the width?

How can I make top navbar take 100% of the width? I have tried many things, including setting width to 100% as well as using <br> after getting desperate. I also read that we should not use row with navbar and I tried to follow the best practise of using Container within Navbar. What’s wrong with my thought process? Thanks in advance

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { Navbar, Nav, Container } from 'react-bootstrap';
import './Navigation.css';
import Table from '../../assets/table/Table';
import TableGrouping from '../../assets/table/TableGrouping';
import Home from '../../pages/Home';

const Navigation = () => {
        <Navbar className="navbar pt-0 fixed-top>
                    <Nav className="bg-custom col-12">
                        <Link className="nav-item" to="/">Home</Link>
                        <Link className="nav-item" to="/tableGrouping">Grouping</Link>
                        <Link className="nav-item" to="/table">Table</Link>
                        <Route path="/" element={<Home/>}/>
                        <Route path="/tableGrouping" element={<TableGrouping/>}></Route>
                        <Route path="/table" element={<Table/>}></Route>

export default Navigation;

Here is my style sheet:

.nav-item {
    text-decoration: none;
    color: white;
    padding: 5px 10px 8px 20px; 

.container {
    width: 100%;

.bg-custom {
    background-color: rgb(154, 166, 218);
    width: 100%;

Source: CSS – Stack Overflow

November 20, 2021
Category : News
Tags: css | html | react-bootstrap | reactjs | twitter-bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.