Html 调整模式大小，可用空间下降？

我正在使用twitter引导模式功能

我已经调整了模式的大小，使其宽度更大，但我的内容并没有填满新打开的空间，而是表现为内容区域变小了。我怎样才能使我的药片都在一条线上

CSS

HTML

新项目

我上传了一张图片，比较了模态的出现前后

-以前

-之后（红色圆圈是我的编辑）

---

感谢阅读。

尝试删除设置为

的最大宽度。modal body

@koala\u dev谢谢，这很有效。

.modal-body {
    max-width:65%;
}
.modal {
    width:65%;
    margin-left: -32.5%; 
}

<div id="newItemModal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-header">
    <h3>New Item</h3>
</div>
<div class="modal-body">
<div class="control-group">
<ul class="nav nav-pills">
          <li class="active"><a href="#">Hot Food</a></li>
          <li><a href="#">Cold Food</a></li>
          <li><a href="#">Breads</a></li>
          <li><a href="#">Breakfast</a></li>
          <li><a href="#">Drinks</a></li>
          <li><a href="#">Dessert</a></li>
          <li><a href="#">Banquets</a></li>
        </ul>
</div>
</div>
<div class="modal-footer">
    <a href="#" class="btn btn-primary btn-small" id="cNewItem">CONFIRM</a>
    <a href="#" class="btn btn-small" data-dismiss="modal">CANCEL</a>
</div>