Html 如何在按钮上方对齐横幅

我需要将我的横幅与按钮对齐，横幅大小为w:967 h:106，试图直接添加图像，但它将所有按钮向右推

到目前为止，我的代码是这样的：

HTML

<nav>
    <img src="png"/>
        <ul class="fancyNav">
            <li id="home"><a href="index.php" class="homeIcon">Home</a></li>
            <li id="s"><a href="#s">Social</a></li>
            <li id="p"><a href="#p">Political</a></li>
        </ul>
    </nav>

网站链接：

---

将110调整到最合适的位置

这是由

显示：内联块引起的其行为如下所示：

Displays an element as an inline-level block container.
The inside of this block is formatted as block-level box,
and the element itself is formatted as an inline-level box.

使用
display:block
可以解决这个问题，但是您可能需要做更多的工作来对齐导航。任何包含
内联
的内容都会导致您看到的内容

以下是
显示：
属性的其他选项：



在课堂上做些改变

.fancyNav {
    overflow: hidden;
    display: inline-block;
    text-align: center;
    top: 16%;
    margin-left: 170px;
    width: 100%;
    }

左对齐-尝试删除：

.fancyNav {
    margin-left: 170px;
}

然后添加：

.fancyNav {
    padding: 0;
}

居中对齐-如上所述，然后添加：

nav {
    margin-left: 170px;
}

或者相反（可能更好）：

.fancyNav{display:block；}使用此内联块。您得到的答案表明，
填充
或
宽度
或
顶部
或
边距
可以更改。。。但是这些都是使用
display:inline block
的黑客/变通方法。我看到您对站点进行了修复以使用此答案，并且导航更接近您现在想要的。现在你可能还想使用width:100%，并保持display:blockYep这个选项已修复，改为block，在html中使用中心标记，整洁。谢谢，酷！现在您需要这个：
.fancyNav li a{padding:14px 35px；}
或类似的。
.fancyNav {
    padding: 0;
}

nav {
    margin-left: 170px;
}

nav {
    width: 967px;
    margin: 0 auto;
}