Tengo una lista de navegacion en la cual quiero que el color de fondo ocupe mas lugar pero no lo logro. Intente utilizar witdh en .clase1 .clase2 .clase3 y tambien en nav pero no logro que el fondo se agrande y ocupe mas lugar. Necesito que el fondo empieze desde el principio del lado izquierdo de la pagina y termine en la section que se ubica a la derecha de la lista de navegacion
Mi codigo html es el siguente:
header{
background-color:#900c37;
border-radius: 20px 0px 20px 0px;
padding: 2px;
width: 98%;
margin: 0;
}
.menu {
position: fixed;
top: 10;
margin-left: 10px;
}
ol li{
display:table;
margin:0px auto 0px auto;
padding: 1px
}
section {
margin-left: 200px;
}
h1 {
color: white;
text-align:center;
}
.clase1{
background-image: linear-gradient(to right, rgba(255,186,3,0), rgba(252, 186, 3, 1));
text-decoration: none;
color: #000000;
border-radius: 20px 0px 20px 0px;
}
.clase2{
background-image: linear-gradient(to right, rgba(209,64,36,0), rgba(209, 64, 36, 1));
text-decoration: none;
color: #000000;
border-radius: 20px 0px 20px 0px;
}
.clase3{
background-image: linear-gradient(to right, rgba(156,9,26,0), rgba(156, 9, 26, 1));
text-decoration: none;
color: #000000;
border-radius: 20px 0px 20px 0px;
}
img{
display: block;'
width: 130px;
height: 40px;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ejericio 1</title>
<link rel="stylesheet" href="css/css.css">
<script src="js/js.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<h1>Gestion de Series</h1>
</header>
<nav class="menu"><ol>
<li><a href ="#Series" class="clase1"> Series</a></li>
<li><a href ="#Opiniones" class="clase2"> Opiniones</a></li>
<li><a href ="#Estadistica" class="clase3"> Estadisticas</a></li>
</ol>
</nav>
<section>
<article class="manejo-de-series">
<h2 id="Series">Manejo de Series</h2>
<p>
Nombre
<br>
<input type="text" name="texto" placeholder="Nombre">
<br>
Descripcion
<br>
<input type="text" name="texto" placeholder="Descripcion">
<br>
Cantidad de temporadas
<br>
<input type="text" name="texto">
<br>
Capitulos por temporada
<br>
<input type="text" name="texto">
</p>
<p>
<button type="button"> Agregar/Actualizar </button>
<button type="button"> Reset </button>
<button type="button"> Previo </button>
<button type="button"> Siguiente </button>
</p>
<p>
<a href="https://www.imdb.com/" target="_blank"> <img src="imagenes/IMDb.png" alt="IMDb"> </a>
</p>
</article>
</section>
Agradezco ayuda para poder solucionar mi problema. Gracias