Verificação HTML: CSS: "left": X não é um valor "left" válido.

Sobre este problema HTML

A propriedade left especifica o deslocamento horizontal de um elemento posicionado — um que tem a sua propriedade position definida como relative, absolute, fixed, ou sticky. O validador W3C verifica CSS dentro de atributos style e elementos <style>, e irá sinalizar qualquer valor que não consiga reconhecer como um valor left válido.

Causas comuns deste erro incluem:

Unidades mal escritas ou inexistentes: Escrever 10 px (com um espaço), 10pixels, ou 20ppx em vez de 10px.
Palavras-chave não suportadas: Usar valores como none, center, ou middle, que não são válidos para a propriedade left.
Unidades em falta em números não-zero: Escrever left: 10 em vez de left: 10px. Zero é o único número que não requer uma unidade.
Erros tipográficos em valores de palavras-chave: Escrever auто ou autoo em vez de auto.
Propriedades personalizadas CSS em estilos inline: Usar var(--offset) num atributo style pode desencadear avisos de validação dependendo do nível CSS do validador.

Os valores válidos para a propriedade left são:

<length>: Um valor numérico com uma unidade, como 10px, 2em, 3rem, 1vw.
<percentage>: Uma percentagem relativa à largura do bloco contentor, como 50%.
auto: Permite ao navegador determinar a posição (esta é a predefinição).
Palavras-chave globais: inherit, initial, unset, e revert.

Usar um valor inválido significa que o navegador irá ignorar completamente a declaração, o que pode quebrar o seu layout. Corrigir estes valores garante uma renderização consistente entre navegadores e conformidade com os padrões CSS.

Exemplos

Inválido: Usar uma palavra-chave não suportada

A palavra-chave none não é um valor válido para a propriedade left.

<div style="position: absolute; left: none;">Elemento posicionado</div>

Inválido: Unidade em falta num número não-zero

Um número isolado (que não seja 0) não é válido sem uma unidade CSS.

<div style="position: relative; left: 20;">Elemento deslocado</div>

Inválido: Unidade mal escrita

A unidade xp não existe em CSS.

<div style="position: absolute; left: 15xp;">Elemento posicionado</div>

Válido: Usar um valor de comprimento

<div style="position: absolute; left: 20px;">20 pixels da esquerda</div>

Válido: Usar uma percentagem

<div style="position: absolute; left: 50%;">Deslocado 50% do bloco contentor</div>

Válido: Usar a palavra-chave `auto`

<div style="position: absolute; left: auto;">Posição determinada pelo navegador</div>

Válido: Usar zero sem uma unidade

Zero não requer uma unidade em CSS.

<div style="position: absolute; left: 0;">Alinhado com a margem esquerda</div>

Válido: Usar `inherit`

<div style="position: relative; left: inherit;">Herda o valor left do elemento pai</div>

Para corrigir este erro, identifique o valor inválido que o validador está a reportar e substitua-o por um dos tipos de valor aceites listados acima. Se pretendia repor a posição, use auto ou 0. Se pretendia remover um valor left previamente definido, use initial ou unset em vez de uma palavra-chave não suportada como none.