如何将hero image移至nav导航栏下方，解决导航栏重叠问题

你为<nav>元素设置了固定高度height: 50px，桌面端行内布局时导航项总高度刚好适配50px的容器高度，但切换到移动端列布局后，多个纵向排列的<li>总高度超过了50px的限制，nav容器无法被内容撑开，溢出的导航内容就会覆盖到下方的hero图片区域。
同时你代码中存在两处可优化问题：nav样式重复声明、piccaption标签重复闭合，也建议同步修正。

以下是适配双端布局的完整修正代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Swimming In Circles</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* { 
    box-sizing: border-box; 
    margin: 0; 
}
#indexhero { 
    height: 350px; 
    background-image: url(pictures/KIDS.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat; 
}
#base { 
    margin: auto; 
    width: 90%; 
}
nav { 
    text-align: center; 
    background-color: #0170C0; 
    /* 移除固定高度，改为最小高度适配桌面端 */
    min-height: 50px; 
    font-weight: bold; 
}
nav a { 
    text-decoration: none; 
    color: #fff; /* 补充链接颜色提升可读性，可按需调整 */
}
nav ul { 
    list-style-type: none;
    padding-left: 0; 
    border-top: 1px solid #EEEEEE;
    background-color: #0170C0;
}
/* 桌面端布局（屏幕宽度≥768px） */
@media screen and (min-width: 768px) {
    nav li {
        display: inline;
        padding: 0 3em;
        line-height: 50px;
    }
}
/* 移动端布局（屏幕宽度<768px） */
@media screen and (max-width: 767px) {
    nav li { 
        text-align: center;
        padding-top: .5em;
        padding-bottom: .5em;
    }
}
/* 以下为可选优化样式 */
.hero-caption {
    text-align: center;
    padding: .5em 0;
    font-style: italic;
}
main {
    padding: 1em 0;
    line-height: 1.6;
}
</style>
</head>
<body>
<div id="base">
    <header>
        <h1><a href="index.html">Introduction of Mac Miller</a></h1>
    </header>
    <nav>
    <ul>
        <li><a href="index.html">Introduction</a></li> 
        <li><a href="swimming.html">Swimming</a></li>
        <li><a href="circles.html">Circles</a></li>
        <li><a href="concept.html">Concept</a></li>
        <li><a href="about.html">About</a></li>
    </ul>
    </nav>  
    <div id="indexhero"></div>
    <!-- 修正重复闭合的caption标签 -->
    <div class="hero-caption">
        Mac Miller front and Center of his K.I.D.S. mixtape
    </div>
    <main>
        <p>This is textThis is textThis is textThis is textThis is text
        This is textThis is textThis is textThis is textThis is text
        This is textThis is textThis is textThis is textThis is text
        This is textThis is textThis is textThis is textThis is text</p>
    </main>
</div>
</body>
</html>

• 把nav的固定height:50px替换为min-height:50px，保证桌面端高度符合预期的同时，移动端可以自适应内容高度
• 用媒体查询做断点适配，768px为常见的移动端/桌面端分界点，你可以根据实际需求调整断点数值
• 移除了原代码中冗余的nav样式声明、多余的<br>标签，修正了caption重复闭合的语法错误
• 补充了链接颜色、排版间距等可选优化，提升页面可读性

内容的提问来源于stack exchange，提问作者BigYag