Some CSS codes are not wokring-CodePudding

I don't know why some codes don't work on CSS, not sure what i did wrong.
This is the html index.html , it has all of the content needed, the url of styles.css is correct

`<!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">
    <link rel="stylesheet" href="styles.css">
    <title>Test</title>
</head>
<body>
<nav class="nav-main">
    <div class="nav-logo">
        <h2>My Site</h2>
    </div>
    <div class="nav-links">
        <ul id="nav-links">
            <li><a href="#homeid">Home</a></li>
            <li><a href="#homeid">Explore</a></li>
            <li><a href="#homeid">About Us</a></li>
            <li><a href="#homeid"><button>Sign Up</button></a></li>
        </ul>
    </div>
  </nav>
  <div class="header-main">....`

And this is the css, i can't change colors or the size or even remove text-decoration on the NAV LINKS, not sure why tried changing from id to class but by doing that even the command display:inline; doesn't work.

.body {
        background-color: lightblue;
      }

    .nav-main {
        background-color: black ;
        color: white;
        margin: 0em -0.4em 0em -0.4em;
        display: flex;
        justify-content: space-between;
        padding-left: 1em;
        padding-top: 0%;
     }

    .nav-logo {
        color: red;
        size-adjust: 3em;
    }
  
    #nav-links li {
        list-style-type: none;
        font-size: 1.3em;
        display: inline;
        margin-right: 1.0em;
        **color: red;**
        **size-adjust: 3em;**
        **text-decoration: none;**
        }

CodePudding user response：

You need to target the anchor elements instead of li.

#nav-links li {
  list-style-type: none;
  font-size: 1.3em;
  display: inline;
  margin-right: 1.0em;
}

#nav-links li a {
  color: red;
  text-decoration: none;
}

<ul id="nav-links">
  <li><a href="#homeid">Home</a></li>
  <li><a href="#homeid">Explore</a></li>
  <li><a href="#homeid">About Us</a></li>
  <li><a href="#homeid"><button>Sign Up</button></a></li>
</ul>

CodePudding user response：

.nav-logo ul li{
    
list-style-type: none;        
font-size: 1.3em;         
display: inline;        
margin-right: 1.0em;
color: red;
size-adjust: 3em;
text-decoration: none;
}