Reduce gap between text and edge of text block horizontally

Site URL: https://www.earandeye.se/

Hi there!

As you see in the picture, there is a gap between the beginning of text to left edge of text block, end the end of text to right edge of text box. When you resize the window, in a certain interval the gap between top block and middle block increases, with nothing inbetween it, and I think it's because this empty gap in the text block is treated like something that needs space and therefore takes up space between top block and middle block. When you shrink the width of the window even more the actual text jumps down as expected and it looks good.

See pictures for better understanding:

Picture 1:

I want to delete the space where there is a red X.

Picture 2:

Changing width of window makes a bigger gap appear (red box). Looks bad.

Picture 3:

Shrinking window even more (mobile view) makes the text jump down as expected. Looks good. Would be nice though if I could control what part of the text that was jumping down so that it says:

What The Ear Receives

Is What The Eye Perceives

(with center align)

Thank you, hope you understand my question haha...

#1. Add to Design > Custom CSS

/* Footer adjust */
div#block-yui_3_17_2_1_1631785708177_2300 {
    width: 100%;
}

#2. It looks like you solved?

#3. Do you still need help?

Hi! Thank you for answering. I solved my problem in another way but was still interested in how to do what I asked for future purposes. Unfortunately I couldn't get your code to work, the gap is still there.