Fixing a text box that has one line of text but a box height of two lines

Hello,

I designed my first page with 7.1 and it looks right on Desktop. When I go to view it in Mobile (on my actual phone), I get overlapping text. My assumption is that this has to do with the fact that my header (in this case, H3) has one line of text in a box that looks like it could fit 2 lines. I can't resize the box to make it one line. I also don't want to drop the paragraph box down because then there's too much space on the desktop view (and on Mobile using landscape view).

First question: Am I right that the Header and Paragraph boxes overlapping (even though there appears to be just empty space in the header box where it overlaps the paragraph box) (See Photos - Note: The photos show two different parts of the page. I goofed when taking the pics.)

Second question: Assuming that's correct, do I need to change the Line Height to get the header text small enough to resize the header box to one line?

Third question: Is there a way of doing that so that I don't make the site ugly? I tried to stick with the Font Family's default settings because I do NOT have a good visual eye and don't want to make the proportions wonky (I'm a UX Researcher building a portfolio site).

Let me know if you need any additional information. Thanks in advance!

Hello,

I designed my first page with 7.1 and it looks right on Desktop. When I go to view it in Mobile (on my actual phone), I get overlapping text. My assumption is that this has to do with the fact that my header (in this case, H3) has one line of text in a box that looks like it could fit 2 lines. I can't resize the box to make it one line. I also don't want to drop the paragraph box down because then there's too much space on the desktop view (and on Mobile using landscape view).

First question: Am I right that the Header and Paragraph boxes overlapping (even though there appears to be just empty space in the header box where it overlaps the paragraph box) (See Photos - Note: The photos show two different parts of the page. I goofed when taking the pics.)

Second question: Assuming that's correct, do I need to change the Line Height to get the header text small enough to resize the header box to one line?

Third question: Is there a way of doing that so that I don't make the site ugly? I tried to stick with the Font Family's default settings because I do NOT have a good visual eye and don't want to make the proportions wonky (I'm a UX Researcher building a portfolio site).

Let me know if you need any additional information. Thanks in advance!