So I made a website by following tutorials on Youtube but when I want to move the nav-area to the left, and logo to the right. But now I can't click the nav-area (its not going to the writed url)

* {
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 15pt;
}

.wrapper {
  width: 1170px;
  margin: auto;
}

header {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/fikri-nyzar-AzQ0G1hJizk-unsplash.jpg);
  height: 100vh;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.nav-area {
  float: right;
  list-style: none;
  margin-top: 30px;
}

.nav-area li {
  display: inline-block;
}

.nav-area li a {
  color: #fff;
  text-decoration: none;
  padding: 5px 20px 0%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 20px;
}

.nav-area li:hover {
  background: rgb(139, 139, 139);
  color: #333;
}

.logo img {
  width: 100px;
  float: left;
  height: auto;
}

.welcome-text {
  position: absolute;
  width: 600px;
  height: 300px;
  padding: 13% 10%;
  text-align: center;
}

.welcome-text h1 {
  text-align: left;
  color: #fff;
  text-transform: uppercase;
  font-size: 60px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.welcome-text a {
  border: 1px solid #fff;
  padding: 10px 25px 0%;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  margin-top: 20px;
  display: inline-block;
  color: #fff;
}

.welcome-text a:hover {
  background: #fff;
  color: #333;
}

#landing-wrapper {
  display: table;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('img/rame.png');
  background-position: center top;
  height: 350px;
}

<header>
  <div class="wrapper">
    <div class="logo">
      <img src="https://via.placeholder.com/100.png" alt="">
    </div>
    <ul class="nav-area">
      <li><a href="3.daftar.html">Daftar</a></li>
      <li><a href="5. resep.html">Resep</a></li>
      <li><a href="4. credit.html">Credit</a></li>
    </ul>
  </div>

  <div class="welcome-text">
    <h1>Makanan Terenak Di Indonesia</h1>
  </div>
</header>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

and this is the css i made, i know i should change the nav-area float to the left and the logo img float to the right. but when i change it id doesn't want to go to the writed url

CodePudding user response：

Here's what I changed:

1. removing the float: right for nav
2. added display: flex for the wrapper
3. put logo inside a span tag instead of its own div

* {
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 15pt;
}

.wrapper {
  width: 1170px;
  margin: auto;
  display: flex;
}

header {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/fikri-nyzar-AzQ0G1hJizk-unsplash.jpg);
  height: 100vh;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.nav-area {
  list-style: none;
  margin-top: 30px;
}

.nav-area li {
  display: inline-block;
}

.nav-area li a {
  color: #fff;
  text-decoration: none;
  padding: 5px 20px 0%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 20px;
}

.nav-area li:hover {
  background: rgb(139, 139, 139);
  color: #333;
}

.logo img {
  width: 100px;
  height: auto;
}

.welcome-text {
  position: absolute;
  width: 600px;
  height: 300px;
  padding: 13% 10%;
  text-align: center;
}

.welcome-text h1 {
  text-align: left;
  color: #fff;
  text-transform: uppercase;
  font-size: 60px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.welcome-text a {
  border: 1px solid #fff;
  padding: 10px 25px 0%;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  margin-top: 20px;
  display: inline-block;
  color: #fff;
}

.welcome-text a:hover {
  background: #fff;
  color: #333;
}

#landing-wrapper {
  display: table;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('img/rame.png');
  background-position: center top;
  height: 350px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Tugas Kelompok website</title>
  <link rel="stylesheet" href="menu.css">
</head>

<body>
  <header>
    <div class="wrapper">
      <ul class="nav-area">
        <li><a href="3.daftar.html">Daftar</a></li>
        <li><a href="5. resep.html">Resep</a></li>
        <li><a href="4. credit.html">Credit</a></li>
      </ul>
      <span class="logo">
                <img src="https://cdn.pixabay.com/photo/2018/03/28/04/02/logo-3268177_1280.png" alt="">
            </span>
    </div>

    <div class="welcome-text">
      <h1>Makanan Terenak Di Indonesia</h1>
    </div>
  </header>
</body>

</html>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>