Issue with responsive menu

Created a child theme for a very simple website for a friend, bevonlawfirm.com

I’ve gotten the logo centered in the header and main menu centered as i wanted, but the menu does not work correctly when resizing the window for mobile versions. Any idea what’s going on? I could do without the search functionality in the header, it’s not necessary here.. any advice is appreciated!

Child theme:

@import url('../attitude/style.css');

<h2 class="entry-title"> Home </h2> {display:none !important;}

.single .entry-title, .page .entry-title { display: none; }

h1, h2, h3, h4, h5, h6 {
	color: #72523b;

/* Links */
a {
	color: #ce7c4c;
	text-decoration: none;
}

#branding {
	margin-top: 5px;
}
.hgroup-wrap {
	padding-top: 5px;
	padding-bottom: 5px;
}
.hgroup-wrap a {
	display: block;
}

#access {
text-align: center;
}

#access ul{
display: inline-block;
}	

#access a {
	color: #72523b;
	display: block;
	float: left;
	font-size: 14px;
	text-transform: uppercase;
	padding: 16px 0 0;
	height: 39px;
}
#access a:hover,
#access ul li.current-menu-item a,
#access ul li.current_page_ancestor a,
#access ul li.current-menu-ancestor a,
#access ul li.current_page_item a,
#access ul li:hover > a {
	color: #5f6db4;