Multi-line Banner Text Not Aligning to the Left Equally

byMR

June 25, 2024

I’m having trouble aligning the text content equally on a ribbon banner to the left side.

Codepen

The issues I’m hoping to fix:

The first line of text seems to be slightly more indented on the left side than the second line.
I’m also seeing the padding on the right side of the second line more extended than the first line.

I’ve tried adjusting the CSS, but I can’t seem to get it right. Any suggestions on how to fix this alignment and padding issue? The goal is to keep the text left aligned on both lines, vertically aligned in the ribbon, and the padding equal on all sides.

Here’s the code:

CSS

/* Full-width image with ribbon text */

.ribbon-header-hero {
  position: relative;
  margin-bottom: 3rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ribbon-header-hero img {
  object-fit: cover;
  width: 100% !important;
  height: auto !important;
  margin: 0;
  padding: 0;
}

.ribbon-hero-text-blue, .ribbon-hero-text-white {
  text-align: left;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 2%;
  max-width: 90%;
}


.ribbon-hero-text-blue p, .ribbon-hero-text-white p {
    display: inline;
    font-size: 1.4rem; 
    letter-spacing: 1px;
    font-weight: 700;
    line-height: 195% !important;
    text-align: left;
    padding: 7px 14px;
    vertical-align: baseline;
    text-transform: uppercase;
}

.ribbon-hero-text-blue p {
  background-color: #2774ae;
  color: #ffffff;
}

.ribbon-hero-text-white p {
    background-color: #fff;
    color: #2774ae;
}
  
 @media (min-width: 1100px) {
   .ribbon-hero-text-blue, .ribbon-hero-text-white {
     max-width: 70%;
     margin: 5%;
   }
   
   .ribbon-hero-text-blue p, .ribbon-hero-text-white p {
     font-size: 1.7rem;
       line-height: 1.85em !important;
   }
  }

@media (min-width: 1300px) {
   
   .ribbon-hero-text-blue p, .ribbon-hero-text-white p {
     font-size: 2.2rem;
       line-height: 1.75em !important;
   }
  }

<div class="ribbon-header-hero"><img role="presentation" src="https://storage.googleapis.com/assets_library/canvas-template/Banners/Banner2_students.jpg" alt="" />
    <div class="ribbon-hero-text-white">
        <p>Begin Your<br>Learning Journey</p>
    </div>
</div>

Thanks in advance for your help!

>Solution :

It’s because you are using the <br> tag in the <p> tag and the css spacing attributes are not reading them as two separate lines. You should separate them into two tags. That way the css spacing attributes will be applied properly

/* Full-width image with ribbon text */

.ribbon-header-hero {
  position: relative;
  margin-bottom: 3rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ribbon-header-hero img {
  object-fit: cover;
  width: 100% !important;
  height: auto !important;
  margin: 0;
  padding: 0;
}

.ribbon-hero-text-blue, .ribbon-hero-text-white {
  text-align: left;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 2%;
  max-width: 90%;
}


.ribbon-hero-text-blue p, .ribbon-hero-text-white p {
    display: inline;
    font-size: 1.4rem; 
    letter-spacing: 1px;
    font-weight: 700;
    line-height: 195% !important;
    text-align: left;
    padding: 7px 14px;
    vertical-align: baseline;
    text-transform: uppercase;
}

.ribbon-hero-text-blue p {
  background-color: #2774ae;
  color: #ffffff;
}

.ribbon-hero-text-white p {
    background-color: #fff;
    color: #2774ae;
}
  
 @media (min-width: 1100px) {
   .ribbon-hero-text-blue, .ribbon-hero-text-white {
     max-width: 70%;
     margin: 5%;
   }
   
   .ribbon-hero-text-blue p, .ribbon-hero-text-white p {
     font-size: 1.7rem;
       line-height: 1.85em !important;
   }
  }

@media (min-width: 1300px) {
   
   .ribbon-hero-text-blue p, .ribbon-hero-text-white p {
     font-size: 2.2rem;
       line-height: 1.75em !important;
   }
  }

<div class="ribbon-header-hero"><img role="presentation" src="https://storage.googleapis.com/assets_library/canvas-template/Banners/Banner2_students.jpg" alt="" />
<div class="ribbon-hero-text-white">
    <p>Begin Your</p>
    <br>
    <p>Learning Journey</p>
</div>
</div>