html5/css3 导航栏大小问题

Question

有一段时间没有做任何网页设计了，但我的女朋友需要对她的网站进行大量更新，我几年前就做了，并且一直在一点一点地添加，结果有点像不完整，所以我想我会研究所有更新的开发，并尝试通过为各种设备添加一些响应式设计来进行彻底检修。

我只是对我正在构建的主模板页面有一个特定的问题 - 我已经在这里放了一份副本:

http://massagecamden.co.uk/copy2/index.html

无论如何，我知道在不同大小页面的媒体查询细节方面有很多事情需要处理，但我目前的问题是在桌面大小版本上处理导航栏的宽度。

我一直认为它在一台显示器上看起来很棒，然后将它拖到一个更大的显示器上，你瞧，导航栏粘在 gridContainer div 的左侧。 我在这里使用 Dreamweaver CS6 进行流畅的布局，导航栏本身位于一个名为 navigation 的流畅 div 中，其宽度设置为 100%。

现在它上方的标题图像也在一个流动的 div(称为标题)中，其宽度也设置为 100%。 在我注意到导航问题之前，我遇到了使图像居中的问题，直到我遇到一个问题(我认为是在这里)，这使我找到了为 img 创建显示: block 规则然后使用边距的解决方案:自动将其居中的技巧。

但是这(或我尝试过的任何其他方法)似乎在导航栏上不起作用。 我承认我从网络上的许多教程中获取了大部分构造，但我对结果感到非常自豪 - 如果我能在扩展浏览器宽度时正确调整大小/位置就好了？

理想情况下，我希望它保持与标题图像相似的静态大小，并且也同样居中。如果这是可行的，那么我也希望能够在两侧看到更多的背景图像，就像在 http://massagecamden.co.uk/ 的原始主页中一样。但我相信 gridContainer 上的 margin:auto 可能不会因为流体网格而这样做？

有人知道我哪里出错了吗？ 请问？

非常感谢 克雷格。

Answer 1

这将使导航居中。

#navigation {
    text-align: center;
}

我不太确定你还想做什么。