html - 导航栏干扰标题 HTML/CSS

Question

我正在尝试创建一个带有 Logo 的导航栏。我的导航栏基本上可以正常工作，但页面内容的标题也被强制放入导航栏中。

这是我的 HTML 和指向我的网站的完整源代码和查看链接 (http://frankkreutzer.com/)

        <header class="section">
        <a id="logo" href="http://frankkreutzer.com"><img src="images/logo.png" width="75" height="75"></a>
        <nav>
            <ul>
                <li><a href="http://frankkreutzer.com" id="current">Home</a></li>
                <li><a href="http://frankkreutzer.com/it-130/assignment-3/assignment3.html" target="_blank">IT 130</a></li>
                <li><a href="http://frankkreutzer.com/csgo/csgo-home.html" target="_blank">CS:GO Project</a></li>
                <li><a href="http://frankkreutzer.com/cth-247/index.html" target="_blank">CTH Final Project</a></li>
                <li><a href="http://frankkreutzer.com/contact.html">Contact Me</a></li>
            </ul>
        </nav>
    </header>

这是我的一些 CSS:

header {
top: 0;
right: 0;
left: 0;
border-bottom: 1px solid #e3e3e8;
}

#logo {
    float: left;
    font-size: 3em;
    margin: 0;
    padding: .4em;
    text-decoration: none;
    color: #222222;
    transition: .5s all;
}

nav {
    float: right;
}

nav ul {
    margin: 0;
    padding: 2.8em 2em;
}

nav ul li {
    display: inline;
    padding: 0 .4em;
}

nav ul li a {
    color: #222222;
    text-decoration: none;
    font-size: 20px;
    padding-bottom: .5em;
    transition: .5s color;
}

nav ul li a:hover {
    border-bottom: 3px solid #222222;
}

#current {
    color: #ff4629;
    border-bottom: 3px solid #222222;
}

Answer 1

在header中添加overflow属性。

header{overflow: hidden;}