2

I am building a website in Squarespace and I am using a code block to add in a custom styled text block. It contains a h2, h3 and an unordered list.

I have got the h2 centred in the div, though I am trying to get the h3 and the unordered list to be balanced and aligned in the columns. I have included a link to my issue: https://jsfiddle.net/5k4mo3fn/29/

I am relatively new to HTML and CSS so sorry if this is easy to solve. I have done some further research and I can't find an appropriate solution. I am using Google Chrome.

I have tried adding code from this question:

Divide list into two columns

    <div style="background-color: #98CB52; padding: 25px; border-left: 6px solid #19764A; column-count: 2; column-fill: balance;">

https://jsfiddle.net/5k4mo3fn/29/

Basically I would like the h3 and all bullet points to be aligned with each other.

JohnP
  • 1,229
  • 6
  • 24
Kirk Cetinic
  • 21
  • 1

1 Answers1

-1

The ul tag has some padding by default. Reducing the padding will align the list with your headers.

I have added padding-left: 20px to the ul tag.

JsFiddle link

Allan Jebaraj
  • 1,062
  • 8
  • 25