why arent my links white and without the line under?-CodePudding

im trying to create a disney plus clone and im just starting out. In the navbar the links should be white and without the underline i have the no text decoration but it still shows up i dont understand.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    background: #0c111b;
    position: relative;
    font-family: roboto, sans-serif;
}

.navbar{
    width: 100%;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0 4%;
    background: #0c111b;
    z-index: 9;
    display: flex;
    align-items: center;
}

.brand-logo{
    height: 70px;
}

.nav-links{
    margin-top: 10px;
    display: flex;
    list-style: none;
    text-decoration: none;
}

.nav-items{
    text-decoration: none;
    margin-left: 20px;
    text-transform: capitalize;
    color: #fff;
    opacity: 0,9;
}

.right-container{
    display: block;
    margin-left: auto;
}

.search-box{
    border: none;
    border-bottom: 1px solid #aaa;
    background: transparent;
    outline: none;
    height: 30px;
    color: #fff;
    width: 250px;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 500;
    transition: .5s;
}

.search-box:focus{
    width: 400px;
    border-color: #1f80e0;
}

.sub-btn{
    background: #1f80e0;
    height: 30px;
    padding: 0 20px;
    color: #fff;
    border-radius: 5px;
    border: none;
    outline: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    margin: 0 10px;
}

.login-link{
    color: #fff;
    opacity: 0.9;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav >
        <img src="images/logo.png"  alt="">
        <ul >
            <li ><a href="#">TV</a></li>
            <li ><a href="#">movies</a></li>
            <li ><a href="#">sports</a></li>
            <li ><a href="#">premium</a></li>
        </ul>

        <div >
            <input type="text"  placeholder="search">
            <button >Subscribe</button>
            <a href="#" >login</a>
        </div>
    </nav>
</body>
</html>

CodePudding user response：

Default browser styles for the <a> element include values for properties:

color
text-decoration

and these default values will always apply unless you explicitly override them:

.nav-items {
  margin-left: 20px;
  text-transform: capitalize;
  opacity: 0.9;
}

.nav-items a {
  text-decoration: none;
  color: #fff;
}

CodePudding user response：

Browsers are applying embedded CSS. by default, links are blue (purple then visited) and underlined, this is why you have these styles.

You can check the option to see the browser styles to verify this.

In every project you will always have to override default CSS styles, unless you use CSS frameworks, such as bootstrap, etc