Kevin Powell - Community•16mo ago

Precise alignment

Good evening! Annoying alignment question ... Why isn't my .title hugging the lime border like the .black-box is doing? Sat with this for an hour now. Pulling mye hair! https://codepen.io/amarlong/pen/JjaYeBP?editors=1100

4 Replies

dysbulic 🐙•16mo ago

Remove:

.black-box {
  margin-block-start: calc(-1 * var(--space-xs));
  margin-inline-start: calc(-1 * var(--space-xs));
}

.black-box {
  margin-block-start: calc(-1 * var(--space-xs));
  margin-inline-start: calc(-1 * var(--space-xs));
}

Change:

#content {
  grid-template-columns: minmax(auto, 50ch) 1fr;
}

#content {
  grid-template-columns: minmax(auto, 50ch) 1fr;
}

To:

#content {
  grid-template-columns: minmax(auto, 55ch) 1fr;
}

#content {
  grid-template-columns: minmax(auto, 55ch) 1fr;
}

& the green will hug the black.

Mannix•16mo ago

i think it's just a font thing so you would need to play with letter-spacing

dysbulic 🐙•16mo ago

It is the width of the content that causes the slight misalign on the right. The larger offset on the left & top are margins.

Å Marlon G•16mo ago

... I forgot that I changed the direction of the text. It fixed it with margin-inline-start. So much energy spent on such a small thing. 😮‍💨 Thanx guys!

Gaming

Programming

Precise alignment