0

I have a div with some text in it, inside that in a P tag I have the text "FOLLOWERS" styled with some letter spacing but the content inside the P tag is taking up more width than the content/text and when I align the text using text-align: center; it isn't completely centered as you can notice when you see the text "FOLLOWERS", there is more space on the right side compared to the left, after and before the text. I tried using margin: 0 auto; too but that didn't help. I checked if there's any padding or anything using dev tools but didn't see anything.

:root {
    --clr-bg-300: hsl(228, 28%, 20%);
    --clr-bg-600: hsl(232, 19%, 15%);
    --clr-bg-900: hsl(230, 17%, 14%);

    --clr-neutral-100: hsl(0, 0%, 100%);
    --clr-neutral-500: hsl(228, 34%, 66%);

    --clr-accent-200: hsl(163, 72%, 41%);

    --ff-primary: 'Inter', sans-serif;

    --fw-bold: 700;

    --fs-500: 0.875rem;
    --fs-900: 4.25rem;
}

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html, body {
    height: 100%;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* Josh's Custom CSS Reset End */

/* Utility Classes */

.text-neutral-100 {
    color: var(--clr-neutral-100);
}

.text-neutral-500 {
    color: var(--clr-neutral-500);
}

.text-neutral-900 {
    color: var(--clr-neutral-500);
}

.text-accent-200 {
    color: var(--clr-accent-200);
}

.text-accent-500 {
    color: var(--clr-accent-500);
}

.text-accent-200::before {
    content: url("images/icon-up.svg");
    margin-right: 4px;
}

.text-accent-500::before {
    content: url("images/icon-down.svg");
    margin-right: 4px;
}

.fw-bold {
    font-weight: var(--fw-bold);    
}

.fs-500 {
    font-size: var(--fs-500);  
}

.fs-900 {
    font-size: var(--fs-900);     
}

.lh-1 {
    line-height: 1;
}

.ls {
    letter-spacing: .35em;
}

.padding-block-800 {
    padding-block: 1.5em;  
}

.padding-block-900 {
    padding-block: 2em;  
}

:where(.flow > :not(:first-child)) {
    margin-top: var(--flow-spacer, 2em);
}

body {
    background-color: var(--clr-bg-900);
    font-family: var(--ff-primary);
    font-size: var(--fs-600);
    margin: 1.75em;
}

.account-card {
    background-color: var(--clr-bg-300);
    border-radius: 1em;
}

.card-top {
    height: 4px;
    width: 100%;
    border-radius: 1em 1em 0 0;
}

.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bg {
    background-color: #fff;
}

.username {
    display: flex;
    gap: .5em;
    align-items: center;
}

.centered-text {
    text-align: center;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="" href="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
  </head>
  <body>

    <main class="text-neutral-100">

        <section class="padding-block-900 flow">

            <div class="account-card"> 
                <div class="card-top fb">
                </div>
                <div class="card-content | flow padding-block-800" style="--flow-spacer: 1.5em">
                    <div class="username">
                        <img src="images/icon-facebook.svg" alt="">
                        <h2 class="fs-500 text-neutral-500">@username</h2>
                    </div>
                    <div class="centered-text">
                        <p class="fs-900 fw-bold lh-1">1987</p>
                        <p class="text-neutral-500 ls bg">FOLLOWERS</p>
                    </div>
                    <div class="text-accent-200 fs-500 fw-bold">12 Today</div>
                </div>
            </div>

            
        </section>
    </main>
  </body>
</html>
Sachin Jadhav
  • 114
  • 1
  • 8
  • 1
    Looks like the `letter-spacing` gets inserted not only between the letters, but after the last one as well. Probably easiest to compensate for here, if you add a matching padding on the other side of the text, `padding-left: 0.35em;` – CBroe Jun 27 '23 at 10:59
  • 1
    Does this answer your question? [How can I remove letter-spacing for the last letter of an element in CSS?](https://stackoverflow.com/questions/6949836/how-can-i-remove-letter-spacing-for-the-last-letter-of-an-element-in-css) – Noam Jun 27 '23 at 11:08
  • Thank you @CBroe that worked and I will be mindful of this the next time I use letter spacing. – Sachin Jadhav Jun 27 '23 at 12:21
  • Thank you @Noam for providing me with more solutions – Sachin Jadhav Jun 27 '23 at 12:24

0 Answers0