Hola estoy empezando con el desarrollo web y no se mucho al respecto, comencé un proyecto para practicar junto con compañeros y todo iba bien hasta que de repente dejaron de aparecer los cambios que hacia en el CSS, por alguna razón solo se reflejan si cambio de nombre el archivo CSS y por consecuente en el HTML lo enlazo con el nuevo nombre, ya investigue bastante y lo que muchos dicen es que posiblemente sean las medidas erróneas en el CSS, sin embargo he verificado a ojo e incluso me recomendaron una pagina (http://jigsaw.w3.org/css-validator/#validate_by_upload) el cual solo me menciona 1 error, comente la linea para que no se tomara en cuenta y siguió sin detectar nada, no entiendo por que solo cambiando el nombre del CSS y de su enlace en el HTML me deja proseguir con los cambios, dejo mi código para que puedan darme su opinión y si es posible una solución, gracias
@import url('fuentes.css');
*{
padding: 0;
margin: 0;
font-family: 'Raleway', sans-serif;
/*box-sizing: border-box;*/
}
body{
background: #F2FAFF;
}
header{
/*position: relative;*/
width: 100%;
}
.menu-navegacion{
display: flex;
background: #6D94B4;
padding: 20px;
height: 50px;
justify-content: flex-start;
align-items: center;
}
.menu-navegacion .catalopedia h1{
font-size: 36px;
padding-left: 25px;
font-weight: 400;
}
.menu-navegacion .catalopedia h1 a{
color: #e6f4f1;
text-decoration: none;
font-family: hyeon;
}
.secciones{
color: #2BADFA;
font-family: Rajdhani-SemiBold;
margin-left: 80px;
background: #E6F4F1;
font-size: 24px;
border: none;
height: 35px;
padding: 2px 10px;
border-radius: 5px 0 0 5px;
outline: none;
cursor: pointer;
transition: .20s;
}
.secciones:hover, .fa-search:hover, .fa-shopping-cart:hover{
background: #2BADFA;
color: #E6F4F1;
}
.busqueda{
background: #F0FAFF;
outline: none;
border: none;
border-radius: 0px 0 0 0px;
font-size: 17px;
padding-left: 15px;
width: 55%;
height: 35px;
}
.fa-search{
font-size: 24px;
color: #2BADFA;
background: #E6F4F1;
border: none;
height: 35px;
width: 60px;
border-radius: 0 5px 5px 0;
outline: none;
cursor: pointer;
margin-right: 50px;
}
.fa-shopping-cart{
display: flex;
align-items: center;
justify-content: center;
border: none;
font-size: 24px;
color: #2BADFA;
background: #E6F4F1;
height: 25px;
width: 25px;
padding: 21px;
border-radius: 50%;
transition: .20s;
}
/*subheader*/
.list-container{
width: 100%;
height: 45px;
background: #2BADF8;
display: flex;
justify-content: center;
align-items: center;
}
.list-container .lists{
display: flex;
}
.list-container li{
list-style: none;
}
.list-container li a{
text-decoration: none;
font-family: Rajdhani-SemiBold;
font-size: 24px;
margin: 0px 100px;
color: #E6F4F1;
padding: 7.5px;
}
.list-container li a:hover{
color: #6B95BC;
background: #F0FAFF;
}
/*Seccion de productos*/
.productos-container{
/*background: #000;*/
width: 90%;
height: 100px;
max-width: 800px;
margin: auto;
}
.productos-container .titulo{
text-align: center;
margin-top: 20px;
color: #000;
font-size: 20px;
}
.productos-container form{
width: 100%;
display: flex;
justify-content: center;
margin: 20px;
}
.barra_busqueda{
width: 70%;
height: 40px;
line-height: 40px;
background: #fff;
position: 0 20px;
border-radius: 50px 0 0 50px;
border: none;
outline: none;
padding: 0 20px;
text-align: center;
font-size: 19px;
transition: .3s;
}
.buscar{
border-radius: 0 50px 50px 0;
font-size: 19px;
padding: 0 20px;
height: 40px;
}
.barra_busqueda:focus{
font-size: 16px;
}
/* categorias */
.categorias__container .categorias{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.categorias a{
text-decoration: none;
margin: 25px 15px;
color: #858181;
font-weight: 700;
font-size: 17px;
background: #CFC9C9;
padding: 10px;
border-radius: 15px;
transition: .2s;
}
.categorias a.activo, .categorias a:hover{
color: #000;
background: #3ADCB4;
font-size: 20px;
}
/*Grid*/
.imagenes-container{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 15px;
width: 80%;
margin-left: 10%;
}
.productos__item{
text-align: center;
}
.productos__img{
width: 80%;
height: 200px;
object-fit: cover;
border-radius: 10px;
cursor: pointer;
transition: .3s;
}
.productos__img:hover{
opacity: .8;
}
.imagenes-container .productos__item h3{
text-align: center;
margin: 3px 0;
}
.imagenes-container .productos__item h3 a{
color: #2A2727;
text-decoration: none;
transition: .2s;
}
.imagenes-container .productos__item h3 a:hover{
color: #554D4D;
}
.imagenes-container .productos__item p{
color: #565151;
font-size: 14px;
text-align: center;
}
/*Paginacion*/
.paginacion{
display: flex;
justify-content: center;
align-items: center;
}
.paginacion ul{
list-style: none;
margin: 20px 0;
}
.paginacion ul li{
display: inline-block;
margin-right: 10px;
}
.paginacion ul li a{
font-size: 18px;
background: #BFD0E6;
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
font-weight: 600;
color: #4B1DC0;
transition: .2s;
display: flex;
justify-content: center;
align-items: center;
}
.paginacion ul li a:hover, .paginacion ul li a.active{
background: #62a6c9;
color: #fff;
}
/*footer*/
footer{
width: 100%;
/*height: 500px;*/
}
.footer-container{
width: 100%;
background: #6D94B0;
}
.footer-main{
width: 80%;
max-width: 1000px;
margin: auto;
padding: 15px 0px;
display: flex;
flex-wrap: wrap;
}
.footer-main .footer-columna{
width: calc(100% / 3);
text-align: justify;
}
.footer-main .footer-columna h3{
font-size: 28px;
color: #474553;
margin-bottom: 15px;
}
.footer-columna p, .footer-columna i{
margin-bottom: 5px;
}
.footer-columna p .fa-whatsapp{
color: #00bb2d;
font-size: 20px;
}
.footer-columna p .fa-facebook-square{
color: #3b5998;
font-size: 20px;
}
.footer-columna p .fa-envelope{
color: #db4a39;
font-size: 20px;
}
.footer-columna a{
text-decoration: none;
color: #524C64;
padding: 5px;
}
.footer-columna .fa-user-plus{
font-size: 50px;
color: #E8E4E4;
display: flex;
justify-content: center;
cursor: pointer;
transition: .4s;
}
.footer-columna .fa-user-plus:hover{
opacity: .5;
color: #000;
}
.footer-columna .centrar{
margin: 0 80px;
}
.footer-columna .centrar .fa-address-card{
font-size: 50px;
color: #E8E4E4;
cursor: pointer;
transition: .4s;
}
.footer-columna .centrar .fa-address-card:hover{
opacity: .5;
color: #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/4226b428c0.js" crossorigin="anonymous"></script>
<link href="css/estilos.css" rel="stylesheet" type="text/css">
<title>Catalopedia</title>
</head>
<body>
<header>
<nav class="menu-navegacion">
<div class="catalopedia">
<h1><a href="#">CATALOPEDIA</a></h1>
</div>
<button type="submit" class="secciones">Secciones</button>
<input type="text" name="busqueda" class="busqueda" placeholder="Buscar">
<button type="submit" class="icono fa fa-search"></button>
<button type="submit" class="icono fas fa-shopping-cart"></button>
</nav>
<div class="list-container">
<ul class="lists">
<li><a href="#">Inicio</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Ofertas</a></li>
<li><a href="#">Sesión</a></li>
</ul>
</div>
</header>
<section id="anuncios" class="anuncios">
<a href="#"><img src="imagenes/anuncios/tupper.jpg"/></a>
</section>
<section id="departamentos" class="departamentos">
<a href="#"><img src="imagenes/departamentos/damas.jpg"/></a>
<a href="#"><img src="imagenes/departamentos/caballeros.jpg"/></a>
<a href="#"><img src="imagenes/departamentos/niñas.jpg"/></a>
<a href="#"><img src="imagenes/departamentos/niños.jpg"/></a>
</section>
<aside class="filtros">
<div class="catalogos">
<p>LISTA DE CATALOGOS MAS OPCIONES, MAS PRODUCTOS Y TU ELIGES</p>
<select name="catalogos">
<option value="0">Catalogos</option>
<option value="1">Tupperware</option>
<option value="2">Andre</option>
<option value="3">Palacio de Hierro</option>
</select>
</div>
<div class="vendedoras">
<p>LISTA DE CATALOGOS VENDEDORAS, ENCUENTRA A TU AMIGA DE CONFIANZA</p>
<input type="text" name="busqueda" placeholder="vendedoras">
<button type="submit" class="icono fa fa-search"></button>
</div>
</aside>
<section id="departamentos" class="slide">
<a href="#"><img src="imagenes/slide/calzado.jpg"/></a>
<a href="#"><img src="imagenes/slide/cocina.jpg"/></a>
<a href="#"><img src="imagenes/slide/ropa.jpg"/></a>
</section>
<footer>
<div class = "contactanos">
<a href="#"><p>Contactanos</p></a>
<button class="fab fa-facebook-f">Facebook</button>
<button class="fab fa-whatsapp">Whatsapp</button>
</div>
<div class = "unete">
<a href="#"><p>Unete a Nosotros</p></a>
<button class="fas fa-user-plus"></button>
</div>
<div class = "nosotros">
<a href="#"><p>Sobre Nosotros</p></a>
<button class="fas fa-exclamation-circle"></button>
</div>
</footer>
</body>
</html>