How can I fix my custom CSS text alignment issue?

Store Design
, ,

Topic summary

A user encountered a CSS text alignment problem where bold text aligned to the right appeared on a separate line instead of staying inline with left-aligned text. They also expressed concerns about custom CSS code slowing down their website.

Resolution:

  • The issue was self-resolved before community assistance could be provided
  • The user fixed the alignment by using display: flex, justify-content: space-between, and align-items: center on h4 elements
  • This approach kept content on the same line while achieving the desired layout

Additional context:

  • Another community member offered to help debug if provided the website URL
  • The final CSS solution also included styling for buttons, headings, and image hover effects
  • The performance concern about CSS slowing down the website was raised but not addressed in the discussion
Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
3

Many thanks dear,

I’ve just fix it this morning and forgot to mark it as accepted solution.

Here is the code:

.animate-arrow {
font-size: 15px;
padding: 10px 45px;
background-color: #000000;
border-radius: 30px;
color: #ffffff;
}
h3,
h4 {
text-align: left;
}
h4 {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 0.5px solid #999;
padding-bottom: 7px;
font-size: 14px;
}
h3 {
font-size: 22px;
}
.multicolumn-card__image-wrapper .media:hover {
transform: scale(1);
}

Thank you!