word-wrap not working in react-bootstrap navbar - navbar

Question

I am trying to make a responsive navbar in react-bootstrap. Once I get down to h4, i want to start normal word wrapping, but no matter what, the h4 text goes outside the div container on the right when I try to test it's responsiveness in chrome. The nav-bar hovers above a dynamic map which is why the z-value is 2.
Here is the js file:
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { Navbar, Nav, NavItem, NavDropdown, ToggleButton, ToggleButtonGroup } from 'react-bootstrap';
export default function Routing(props) {
return (
<>
<Router>
<Navbar collapseOnSelect className="navbar">
<div className="h-box">
<Navbar.Brand>
<h4>Portland Watershed Data Dashboard</h4>
</Navbar.Brand>
</div>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto align-items-center">
<Nav.Link>
<Link to="/"><h5 className="tiny link">Home</h5></Link>
</Nav.Link>
<Nav.Link>
<Link to="/page"><h5 className="tiny link">Gradient</h5></Link>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<Switch>
<>
<Route exact path="/">
<Home />
</Route>
<Route exact path="/page">
<Page />
</Route>
</>
</Switch>
</Map>
</Router>
</>
)
And here is the css for these elements, I have removed all the text color, background color, and shadowing for readability.
body {
margin: 0px;
padding: 0px;
}
.header {
height: 45px;
position: fixed;
top: 0;
}
.navbar {
left: 0;
position: fixed;
top: 0;
z-index: 2;
width: 100%;
display: block;
}
.h-box {
border: solid black;
padding-top: 0.5vh;
padding-bottom: 0.5vh;
padding-left: 2vh;
padding-right: 1vh;
text-align: center;
}
.tiny, .h-box h4 {
display: block;
}
.link {
margin-right: 2vh;
}

Answer 1

add this className to h4:
<h4 className="text-wrap">Example Headline Here</h4>
should take care of your problem