Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Pelo print que você mandou dá para ver que a imagem realmente não está encostada totalmente na lateral esquerda, mas isso não é “um bug” e sim consequência do CSS que envolve a imagem.
Algumas causas comuns para isso acontecer:
Margem ou padding do body/container
Normalmente o navegador coloca um margin: 8px; no <body>. Isso já empurra tudo (inclusive a imagem) um pouco para dentro.
Se você não resetar com algo como:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
sempre haverá esse espacinho.
A imagem pode estar dentro de uma div com padding ou margin
padding ou está centralizado com margin: auto;.Uso de display: flex ou text-align: center no pai
display: flex; justify-content: center; ou se a imagem for inline-block e o pai tiver text-align: center;, ela será centralizada automaticamente.Para confirmar, basta inspecionar o código no navegador (F12 > aba Elements e Computed Styles). Lá você verá se o body, a div ou a própria img têm margens/paddings que estão deslocando.
Se você quiser que a imagem fique grudada à esquerda, pode forçar isso assim:
body {
margin: 0; /* tira o espaçamento padrão do navegador */
}
img {
display: block; /* evita espaços de inline */
margin-left: 0;
}