Left align home page text

I want to left align the blue-colored text on my page so it doesn't appear over my picture. Appreciate any help that I can get!

Here is my website: https://helix-apricots-pabf.squarespace.com

@mudit Add to Home > Design > Custom CSS

div#collectionDesc {
   width: 92%;
}
.homepage .collection-nav-desc-wrapper.too-tall.show {
   text-align: left !important;
}

See how to insert if you don't know: https://beaverhero.com/squarespace-how-to/#HowtoInsertCustomCSS

That made the "I live in" text go from 2 lines to 1 line. I was aiming for the same 2 line format but aligned to the left. Would also love to the keep the "Hi" text left aligned.

That made the "I live in" text go from 2 lines to 1 line. I was aiming for the same 2 line format but aligned to the left. Would also love to the keep the "Hi" text left aligned.

@mudit Remove above code and use

div#collectionDesc {
   text-align: left;
}

Thanks @tuanphan. The text is now left aligned but still not aligned to the left of the screen. Is it possible to shift it to the left so it's aligned to the left, just like my name on top is aligned to the left?

Thanks @tuanphan. The text is now left aligned but still not aligned to the left of the screen. Is it possible to shift it to the left so it's aligned to the left, just like my name on top is aligned to the left?

@mudit

Your content block is limited width. If you look closely, the code I sent first will increase the width, but it will also split the second text into one line. You can use the code first, and then add this code to the text to make it into 2 lines

I live in Berkeley, CA, and love to <br/> design purposeful digital products.

This mean, add this to Home > Design > CUstom CSS

div#collectionDesc {
    width: 92%;
}
.homepage .collection-nav-desc-wrapper.too-tall.show {
    text-align: left !important;
}

Then edit your text

 I live in Berkeley, CA, and love to <br/> design purposeful digital products.

Almost getting there—I tried adding <br> to the text but it's not behaving like code. Where do I add <br> so it behaves like code?

Almost getting there—I tried adding <br> to the text but it's not behaving like code. Where do I add <br> so it behaves like code?

@mudit add this code to handle "i live in..." :-D

.homepage div#collectionDesc p:last-child {
   width: 50%;
}

thank you so much!

thank you so much!