import styled from "styled-components"; import { devices } from "./devices"; export const HeaderContainer = styled.div` padding: 20px; @media ${devices.lg} { padding: 40px 90px; } @media ${devices.xl} { padding: 40px 215px 40px 150px; } @media ${devices.xxl} { padding: 40px 150px; } `;Además, ocurre en otros componentes. Especialmente en Pantallas de 1440px y 1280px.
Esto es lo que se ve, como lo indica la imagen a continuación usando la herramienta Chrome Dev:
En su captura de pantalla, está recibiendo una advertencia de valor de propiedad no válido para lo siguiente:
@media ${devices.xl} { padding: 40px 215px, 40px, 150px; }No debe haber comas, como en el código que ha compartido en el fragmento. Si no hay comas en su código, tal vez un reinicio del servidor de desarrollo o una memoria caché del navegador clara resuelva su problema, ya que parece que simplemente no se ha actualizado.