Kindly help on this code

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Afya Juice Ltd</title>
    <link rel="stylesheet" href="afya.css">
</head>

<body>
    <section class="sec">
        <header>
            <a href="#"><img src="255.ico" alt="afyalogo" class="logo"></a>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Products</a></li>
                <li><a href="">What's New</a></li>
                <li><a href="">Team</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </header>

    </section>

</body>

</html>```


@import url(‘https://fonts.googleapis.com/css2?family=Langar&display=swap’);

  • {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: ‘Poppins’, sans-serif;

}

section {

position: relative;

width: 100%;

min-height: 100vh;

padding: 100px;

display: flex;

justify-content: space-between;

align-items: center;

background-color: rgba(253, 224, 57, 0.133);

transition: 0.5s;

}

header {

position: absolute;

top: 0;

left: 0;

width: 100%;

padding: 20px 100px;

display: flex;

justify-content: space-between;

align-items: center;

}

header.logo {

position: relative;

max-width: 80px;

}

header.ul {

position: relative;

display: flex;

}

/cHANGE fAILED oN hERE/

header ul li {

list-style: none;

}

header ul li a {

display: inline-block;

color: rgb(83, 238, 11);

font-weight: 400;

margin-left: 40px;

}

@Kidhh What is your problem?

i want it to be on a straight line on the nav bar

Can you give me the project link?

@Kidhh in header the position should be fixed. and header.ul is not a code. It should be header .ul for class in header or header ul for tags.

1 Like

can you please write it on a code form p

thanks bro it should be relative not fixed

Here

@import url(‘https://fonts.googleapis.com/css2?family=Langar&display=swap’);
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: ‘Poppins’, sans-serif;
}
section {
   position: relative;
   width: 100%;
   min-height: 100vh;
   padding: 100px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: rgba(253, 224, 57, 0.133);
   transition: 0.5s;
}
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 100px;
  display: flex;
  justify-content: space-between;
 align-items: center;
}
header .logo {
  position: relative;
  max-width: 80px;
}
header .ul {
  position: relative;
  display: flex;
}