<ul> items overflowing from nav
===

this is my very first post on this site, so excuse me if I'm not clear enough.

I'm currently working on a  [website](http://linda-navarro-coaching.com/) built using wordpress, and I have an issue with CSS.

My menu bar is made with an ul, and, when I increase text size in my navigator (with ctrl+scroll for example), li items overflow from the div, like in [this image](http://lindanavarrocoaching.files.wordpress.com/2012/07/bug.jpg).

In this case, I would like the li to be splitted in two part, and fit in the div, but I did not find how to realize that. I've already tried the "word-break" solution, but I guess I was doing it wrong.



Because my site is hosted by Wordpress, there are two different CSS sheets used for the design, which is a bit messy.

Here is a part of my sheet :

    #access {
	display:inline-block;
	width:27%;
	font-size:100%;
	margin:2.5% auto 6px;
	border:none;
	padding-top:10px;
	padding-bottom:10px;
	overflow:hidden;}

    #access a {
	display:inline-block;
	max-width:100%;
	color:rgb(0,102,138);
	font-size:22px;
	padding:none;
	line-height:30px;}

    #access li {
	display:block;
	padding:4px;
	float:none;}

    #access ul {
	list-style:none;
	font-size:100%;
	margin:0;}

I can't post the theme's CSS link because, as a new member, I'm limited to 2 hyperlinks by post.

Thank you for your help.