将导航栏与主体文本对齐

Question

我试图将导航栏的最左侧元素与其下方的主体对齐。我现在有这个，但它是一个＆＃34;脏＆＃34;解决方案并将导航推出移动视图。

这是我希望它看起来的样子。我目前的做法如下：

#wrapper {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 50px;
    overflow: hidden;
}

#main {
    width: 100%;
    margin: 0 auto;
    float: left;
}

/* nav structure */

#header {
    font-family: 'Montserrat', sans-serif;
}

#menu-nav {
    padding: 15px 0px;
    position: relative;
    text-align: left;
    left: 660px;
}

#menu-nav li {
    display: inline-block;
}

#menu-nav li a {
    padding: 15px 0px;
    display: block;
    width: 100px;
}

正如你所看到的，我使用了一个660px的左值，这真的推动了导航。有没有一种方法可以将它对齐，以便在移动设备上看起来像这样？这是当前的移动视图：

如果您需要查看实际网站：http://adamshort.site50.net

Answer 1

请尝试ul#menu-nav

#menu-nav {
padding: 15px 0px;
position: relative;
text-align: left;
max-width: 1000px;
margin: 0 auto;
}

Answer 2

试试这个解决方案：

.menu-nav-container {
  text-align: center;
}

#menu-nav {
  padding: 15px 0px;
  text-align: left;
}

Answer 3

如果您提供的HTML代码也会更容易为您提供帮助，很遗憾，我无法让您的网站加载。

但是，我建议您将#wrapper更改为一个类，然后您可以使用与您的内容相同的包装器来包装导航内容。这样他们都会尊重相同的（响应性）左边距。然后只需左对齐导航列表就会使其与下面的内容在同一点开始。

您接近它的方式没有响应，只能在特定宽度的页面上工作，因为您明确告诉Nav总是从页面左侧坐660px。与此同时，您的内容包装器有 margin：0 auto ，这会导致页面左侧的边距根据浏览器窗口的大小动态更改。

Answer 4

假设它在#wrapper中你可以给它一个宽度并使它像你一样居中#main：

#menu-nav { 
padding: 0px; 
position: relative; 
margin: 0 auto;
display: block;
width: 100%;
}