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
dys šŸ™
dys šŸ™ā€¢2y 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
Mannixā€¢2y ago
i think it's just a font thing so you would need to play with letter-spacing
dys šŸ™
dys šŸ™ā€¢2y 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
ƅ Marlon Gā€¢2y 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!
Want results from more Discord servers?
Add your server