title: <ul> items overflowing from nav
body: <p>this is my very first post on this site, so excuse me if I'm not clear enough.</p>
  
  <p>I'm currently working on a  <a href="http://linda-navarro-coaching.com/" rel="nofollow">website</a> built using wordpress, and I have an issue with CSS.</p>
  
  <p>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 <a href="http://lindanavarrocoaching.files.wordpress.com/2012/07/bug.jpg" rel="nofollow">this image</a>.</p>
  
  <p>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.</p>
  
  <p>Because my site is hosted by Wordpress, there are two different CSS sheets used for the design, which is a bit messy.</p>
  
  <p>Here is a part of my sheet :</p>
  
  <pre><code>#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;}
  </code></pre>
  
  <p>I can't post the theme's CSS link because, as a new member, I'm limited to 2 hyperlinks by post.</p>
  
  <p>Thank you for your help.</p>