Width não está sendo aplicado

Andris,

A tag <a> é display inline por padrão. Por isso, não respeita a propriedade width.

Mude para display: inline-block e deve funcionar! :)

Opa, Alexandre! Acrescentei o "display: inline-block" mas continua não sendo aplicado. Na resolução do instrutor do curso tbm não tem o display.

Ah, é mesmo! No exercício, vocês usam o position: absolute, né?

Quando você coloca o position: absolute, o elemento sai do "fluxo" normal do documento e a largura é respeitada.

Chegou a colocar o position e o transform?

.banner-twitter {
  position: absolute;
  top: 0;
  right: 0;
  transform-origin: 0 0;
  transform: translate(6.5754em, -2.4749em) rotate(45deg);
}

O width só é aplicado se eu colocar position e transform? Não posso primeiro ajudar tudo antes de fazer o posicionamento?

Isso nesse caso, não em geral. Existem várias outras maneiras de posicionar.

O width é aplicado mesmo para display inline quando o posicionamento for absolute.

O transform não interfere no width, nesse caso.

É que na proposta de solução, os dois tão juntos.

Ah, percebi que o line-height, font-size e width tão diferentes do seu na solução proposta.

Quanto ao valor do width eu coloquei diferentes valores mas nada aconteceu. No caso do line-height e do font-size, eles interferem no meu width?

Obs: Sei que pelo width estar em "em" ele usará a font do elemento como medida e por isso influenciaria, mas como eu disse, eu cheguei a por 50em e não houve nenhuma alteração. Então creio que o valor não influencie o width ser aplicado ou não.

O line-heigth afeta a altura (height). O font-size pode, sim, afetar a largura.

Se você usar o seu código anterior, sem position: absolute mas width: 50em, a largura não tem efeito.

.banner-twitter{
  font-size: .6em;
  color: #FFF;
  font-family: sans-serif;
  font-weight: 600;
  text-decoration: none;
  background-color: #660066;
  border: .25em solid #000;
  box-sizing: border-box;
  width: 50em; /* editado */
  padding: 1em 0;
}

A tag <a> é display: inline e não respeita a largura, por padrão.

Porém, se colocarmos o position: absolute, sem o transform, a largura terá efeito!

.banner-twitter {
 /* propriedades anteriores... */

  position: absolute;
  top: 0;
  right: 0;
}

Mas neste caso, se eu colocasse o display: inline-block, o width não deveria ser aplicado?

Vai e mesmo sem o position: absolute. Ficaria maior, só que no meio da página.

Com o position: absolute vai ter o mesmo efeito da figura acima, ficando no canto superior direito.

Funcionou Alexandre! Obrigado mais uma vez!