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

Question

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?
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 = () => {
return(
<Navbar className="navbar pt-0 fixed-top>
<Router>
<Container>
<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>
</Nav>
</Container>
<br/>
<Container>
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="/tableGrouping" element={<TableGrouping/>}></Route>
<Route path="/table" element={<Table/>}></Route>
</Routes>
</Container>
</Router>
</Navbar>
)
}
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%;
}

Answer 1

Using <div class="Container"> in Bootstrap will certainly contain the width but you are using <container>. It might be a case of one or the other for Bootstrap to work for your advantage. Try removing that container/div and also check the result without your edited CSS as that may ultimately cause other Bootstrap styling problems later on.