无法删除 JQuery 折叠项标头之间的空格

我已经看过这里和这里的问题，但我无法弄清楚如何删除导航栏中 jquery-ui 手风琴标题周围的空格。我已经尝试过 chrome，即 ff 和 safari，使用相关的开发工具查看，似乎都向我保证边距和填充是 0px。

这就是我想要的。

http://media02.hongkiat.com/jquery-ui-accordion/accordion-second-look.jpg

抱歉，我没有代表发布图像。

所以，这是我的基本网站构建的jsfiddle。

目录

    <div id="nav" style="width: 15%; float: left;">
        <div>
            <h3>Home</h3>
        </div>
        <div></div>
        <div>
            <h3>Travel</h3>
        </div>
        <div>
            View trips booked through the agency. 
  <ul>
          <li>Trips Pending </li>
          <li>Trips Archived</li>
          <li>Travelers</li>
      </ul>
        </div>
        <div>
            <h3>Accounts</h3>
        </div>
        <div>Select an account and view information about it, such as it's transactions, travelers associated with the account, and trips booked.</div>
        <div>
            <h3>Admin</h3>
        </div>
        <div>Generate comission reports, manage users and passwords, and deal with administrative information.</div>
    </div>

CSS

html, body
{
    padding:0px;
    margin:0px;
    height:100%;
}
html
{
    background:#CCCCCC; 
}
:focus, :active 
{  
    outline: 0;  
}
#nav .ui-accordion-content 
{  
    width: 100%;  
    background-color: #f3f3f3;    
    font-size: 10pt;  
    line-height: 16pt;
}
#nav .ui-accordion-content > * 
{  
    margin: 0;  
    padding: 20px;  
}  
#nav .ui-accordion-header 
{  
    background-color: #E6E6E6;  
    margin: 0px;  
}
#nav .ui-accordion-header, .ui-accordion-content
{
    padding: 0px;
}
* 
{   
    -moz-box-sizing: border-box;   
    -webkit-box-sizing: border-box;   
    box-sizing: border-box;  
}

Js

$("div#nav").accordion({ heightStyle: "content" });

非常感谢StackOverflow社区的帮助。