页面上的内容有问题。其与响应式移动视图上的导航栏重叠。
这是codepen： https://codepen.io/anon/pen/ZdoRBL
问题图片 https://gyazo.com/20831eab7d38cd4fc51f2c52db66bff5
使用z-index尝试了许多方法：1;但是在响应式移动视图上，内容仍然重叠。
感谢您的帮助！
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<link rel="stylesheet" href="css/styles.css">
<title>Puerto Rico & Florida Recovery Training Academy</title>
</head>
<body>
<header>
<nav>
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="logo">
<a href="#">PRFTA</a>
</div>
<div class="nav-wrapper">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#" class="cursos">Cursos</a></li>
</ul>
</div>
</nav>
</div>
</nav>
<div class="wrapper">
<div class="container">
<h1>Puerto Rico & Florida Recovery Training Academy</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae doloremque autem nam, illo nisi soluta voluptatibus et in fugiat aliquid nostrum asperiores. Laboriosam vitae, minus odio! Iure id quaerat voluptatum.</p>
<a href="#section-a" class="button">MAS INFORMACIÓN</a>
</div>
</div>
</header>
<div class="content" section id="section-a">
<h1>Porque escojer a PRFTA</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, vel rem necessitatibus suscipit nobis, modi explicabo corporis cupiditate ad quos voluptate, eligendi unde magni. Et velit perferendis, ex atque laudantium perspiciatis inventore, impedit quibusdam quia maiores? Et, fuga natus? Alias deserunt voluptas ut, neque explicabo dolorem accusantium quidem eum reprehenderit architecto aspernatur ab inventore odit delectus asperiores ipsa tempore, libero ipsum sint, vel quisquam vitae quae sapiente? Molestias suscipit perspiciatis in autem aut soluta quae architecto, porro neque fuga praesentium consequuntur incidunt tenetur pariatur sequi, dolores delectus voluptas consectetur quaerat excepturi. Reprehenderit voluptatum minima accusamus eum ipsum officia! Qui omnis deserunt excepturi facere optio perspiciatis molestias et natus, vitae amet nulla a, libero nihil eveniet error magnam quos corrupti quidem nobis repellat provident explicabo veniam maxime unde quia. Quos non fugit, praesentium eum doloremque vero officia quidem ducimus sint facilis deleniti inventore ipsum, temporibus aliquam illum sunt adipisci dolorum. Minima eaque nostrum quaerat, atque dolorem? Earum tempora deleniti beatae nostrum, necessitatibus ipsum cum architecto doloribus corporis molestias cumque, quae, libero optio voluptatum inventore nihil. Illo dignissimos culpa minus porro, aliquam perferendis corporis voluptate aliquid deserunt excepturi architecto soluta consequuntur dicta fugit, eos, ratione tempore incidunt. Molestias modi eaque laboriosam sit aspernatur, dolorem ipsa unde vel voluptas enim aut totam sunt iusto mollitia quaerat consectetur, provident ut temporibus! Distinctio suscipit, obcaecati, iusto aperiam quaerat qui itaque unde incidunt deserunt provident perferendis reiciendis maiores quod, officia reprehenderit in doloribus vel facilis est ad nam tempora. Tenetur adipisci officia explicabo quo, repellat at consectetur ipsum! Deleniti maiores vero, possimus quaerat nisi. Excepturi quod rerum, voluptates itaque distinctio dicta magnam deleniti doloribus accusamus minima veniam tempore expedita possimus id cumque, ipsum assumenda natus dignissimos. Explicabo minima amet, nobis eius! A sapiente beatae ipsa placeat, delectus omnis. Officia eaque recusandae rerum magni eligendi eveniet assumenda. Ipsa impedit quam sapiente aperiam porro tempore quas, atque adipisci, consequuntur, praesentium perspiciatis similique quod voluptate nisi sit! Nemo explicabo voluptatibus facilis enim! Illo ipsum praesentium, aliquid quod mollitia, neque, sint unde at nostrum facere, voluptatum doloremque beatae nesciunt tenetur dolore suscipit ab quae magni? Tempore at, deserunt voluptates amet quaerat suscipit officiis animi error, sequi quasi laborum molestias voluptas magnam ab! Similique quasi, ipsam ipsum eaque. Assumenda officia facere voluptatum rerum ratione sit atque sint id qui quibusdam quia, necessitatibus, labore. Velit officia et laborum excepturi quisquam molestias nostrum vitae, saepe architecto accusamus cumque nobis unde repellat at placeat incidunt, non? Soluta, optio obcaecati! Error vel, adipisci magni beatae quo totam cupiditate voluptatem hic, rem rerum facilis et reiciendis omnis minima officia porro! Autem rerum, minima eius vitae libero. Est earum odio nisi, harum nam modi, excepturi, exercitationem impedit cumque laboriosam nemo iure, nulla temporibus recusandae illum architecto! Enim id doloribus ea veniam ratione ipsam nam praesentium vitae odit impedit qui sunt, dolores similique, placeat beatae repellat, excepturi laborum voluptates adipisci eaque dolore? Qui quis, repudiandae facilis minima facere doloribus, fugiat consequatur saepe sequi, veniam minus totam perspiciatis? Cum eum suscipit voluptatem aliquid ducimus, sequi, dicta beatae aspernatur labore, assumenda eos, fuga officia distinctio. Quos, quo explicabo autem dolorem hic ipsa eveniet deleniti nobis praesentium, labore omnis facere expedita quidem enim voluptate veritatis ex quibusdam quas cupiditate dolorum neque eum repellendus dignissimos et earum. Consequatur, et, laborum. Harum et tempore provident incidunt aspernatur autem, quia magni amet quas voluptatem aliquam nulla quasi, unde molestiae perspiciatis accusantium fugiat explicabo, hic modi omnis quod tenetur. Eum exercitationem ratione dicta voluptatibus inventore ipsum perspiciatis, voluptate facilis. Ea veniam ad modi suscipit ipsum laboriosam commodi labore eos optio alias, nemo fugit iusto earum quae, vel nobis nesciunt? Tenetur, natus quibusdam excepturi fuga. Voluptates similique tempora, earum nulla minima, ex repellat amet dolores repudiandae, magnam nesciunt tempore error sequi non assumenda laborum incidunt tenetur sit quasi dolorem. Fuga vero quos eveniet pariatur perferendis mollitia quo sit consequatur corrupti, dolorem quaerat sunt soluta ipsum fugiat sequi repudiandae assumenda nostrum incidunt expedita sapiente. Delectus hic, eaque aspernatur quos odit quisquam illo, voluptatum quod eos culpa consectetur sit minima at sed rerum ea. Sunt voluptate, id! Sunt assumenda vel sequi, maiores cum, magni alias adipisci culpa doloremque facere veniam praesentium animi. Quod voluptates porro id iusto nulla rem facere sed perspiciatis aliquam ipsum, fuga, mollitia error distinctio animi minima optio vitae reprehenderit, consequatur deleniti at, voluptatem recusandae obcaecati nesciunt molestias voluptatibus. Atque laboriosam ipsum natus fugiat, eligendi excepturi accusantium? Nemo ullam dolore harum ab quibusdam placeat pariatur, cum culpa? Adipisci aspernatur reprehenderit fugiat accusantium animi delectus eaque facilis ut, obcaecati numquam impedit suscipit illum ipsa, repellat nobis doloribus sit dicta, vel libero rerum vero voluptas. Pariatur voluptatem, quasi earum. Consequatur blanditiis neque quo eius aliquam aperiam nobis sunt esse dolore, aspernatur nostrum, ratione officiis veritatis odit, quasi aut. Laboriosam eius voluptatibus cumque sint dolor, quo voluptatum dolorum porro eos! Corporis soluta facere sunt quam, provident animi pariatur laudantium qui accusamus error magni sint nihil officia minima rerum velit dolore, incidunt quas nostrum magnam dolorem quos expedita facilis! Dignissimos autem quam, natus facere ad doloremque nisi optio dolorum aspernatur reiciendis dicta animi, laborum modi commodi? Consectetur assumenda recusandae quis quod ea fuga ab, aliquam eos adipisci quas! Amet sequi minus vel qui culpa sunt delectus nam alias ipsa odio ea magnam laborum deleniti, pariatur dolorum, veritatis libero praesentium odit at commodi illo ullam eligendi. Error perspiciatis commodi voluptates harum hic laborum cumque, optio quod accusantium! Omnis nisi doloremque, tempore consequuntur sunt delectus deleniti quod qui obcaecati nesciunt vel voluptas quam suscipit consectetur repellat dignissimos modi, dolorum assumenda cupiditate quae, vitae. Voluptas nostrum qui repellendus, magnam eum velit reiciendis obcaecati repudiandae facilis porro, non! Minus totam at doloremque, libero reprehenderit beatae reiciendis fugiat officiis soluta? Optio sint tempora, deserunt sed facilis. Quos, cum at. Impedit non obcaecati saepe suscipit tempora temporibus excepturi fugiat ducimus alias nemo voluptatibus maiores magnam ad in similique rem, quaerat molestiae minus. Ipsa quidem sapiente aspernatur molestiae quaerat molestias, accusamus nostrum quisquam magnam. Reprehenderit dolorum vero amet est voluptatem iste quis magni aperiam, officia voluptatum quo at quasi cupiditate, quam quod magnam quisquam debitis nihil.</p>
</div>
</body>
</html>