Text no overflow - html

Question

I'm not entirely sure how to phrase this question, but I'll give it a try.
I have a website set up with a side navigation menu. When the menu is opened, the body content is pushed all the way off screen making the text unreadable. I want to know what css property I need to set to make the text overflow onto the next line.
An example of this can be seen in the W3Schools. When the menu is opened, the text does not disappear behind the screen.
CSS
html,
body {
height: 100%;
font-family: 'Ubuntu', sans-serif;
}
body {
padding-top: 70px;
}
body.push {
overflow-x: hidden;
}
p {
color: red;
word-wrap: break-word;
}
.navbar-custom {
border-radius: 0;
transition: margin-left 0.5s;
transition: 0.5s;
padding-bottom: 6px;
background-color: transparent;
border-bottom: 1px solid #e5e5e5;
}
.navbar-custom a {
transition: 0.5s;
color: black;
}
.navbar-custom.color {
background-color: white;
}
.navbar-custom.color a {
color: black;
}
.navbar-custom.push {
margin-left: 300px;
background-color: white;
border-bottom: 1px solid #e5e5e5;
}
.navbar-custom.push a {
color: black;
}
.row {
text-align: center;
}
#main {
padding-top: 50px;
transition: margin-left 0.5s;
}
#main.push {
margin-left: 300px;
}
#sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
overflow-y: auto;
padding-top: 40px;
transition: 0.5s;
font-size: 15px;
background-color: white;
}
#sidenav li {
border-bottom: 1px solid #e5e5e5;
}
#sidenav a {
padding: 15px 8px 20px 32px;
text-decoration: none;
color: #818181;
display: block;
transition: 0.3s;
}
#sidenav i {
padding: 15px 8px 20px 10px;
text-decoration: none;
display: inline;
overflow-x: hidden;
}
#sidenav a:hover,
#sidenav .offcanvas a:focus {
text-decoration: none;
color: #ffcc00;
}
#sidenav .social {
text-align: center;
padding: 15px 8px 20px 32px;
}
#sidenav .social i:hover {
transition: 0.3s;
color: #ffcc00;
}
#sidenav #nav {
position: absolute;
top: 0;
width: 300px;
margin: 0;
padding: 0;
list-style: none;
}
#sidenav.toggled {
width: 300px;
border-right: 1px solid #e5e5e5;
}
#media screen and (max-height: 450px) {
#sidenav {
padding-top: 15px;
}
#sidenav a {
font-size: 18px;
}
}
#media screen and (max-width: 500px) {
#main.push {
margin-left: 200px;
}
#sidenav .social {
text-align: left;
}
#sidenav.toggled {
width: 200px;
}
.navbar-custom.push {
margin-left: 200px;
}
}
HTML
<section id="sidenav">
<ul id="nav">
<li class="social">
<i class="fa fa-envelope"><a href="#" class="hidden-sm hidden-md hidden-lg"><span
class="fa fa-envelope"></span></a></i>
<i class="fa fa-github"><a target="_blank" href="#" class="hidden-sm hidden-md hidden-lg"><span
class="fa fa-github"></span></a></i>
<i class="fa fa-linkedin"><a target="_blank" href="#"
class="hidden-sm hidden-md hidden-lg"><span class="fa fa-linkedin"></span></a></i>
</li>
<li>Home <span class="glyphicon glyphicon-home"></span></li>
<li>Portfolio <span class="fa fa-folder-open"></span></li>
<li><a target="_blank" href="#">Resume <span class="fa fa-file"></span> </a>
</li>
</ul>
</section>
<nav class="navbar navbar-custom navbar-fixed-top">
<section class="container">
<section class="navbar-header">
<a onclick="toggleMenu()" class="navbar-brand">Menu <i class="fa fa-bars" aria-hidden="true"></i></a>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</section>
</section>
</nav>
<section id="main">
<section class="container">
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</section>
</section>
JS
var main = $("#main");
var sidenav = $("#sidenav");
var body = $("body");
var navbarFixed = $(".navbar-fixed-top");
var navbar = $(".navbar-custom");
function toggleMenu() {
main.toggleClass("push");
sidenav.toggleClass("toggled");
body.toggleClass("push");
navbarFixed.toggleClass("push");
};