word-wrap not working in react-bootstrap 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