How can I fix the mobile text issue on the main header?

[kozacashmere]

The text on the main header is "Koza Cashmere", but the text on the mobile version shows up as:
Koza Cash

   mere

The second half of Cashmere gets moved to the next line.

How do I force the mobile site to move the entire second word?

Thanks.

Site: Kozacashmere.com

[kazi]

@kozacashmere  add this css  to assets > base.css

@media screen and (max-width: 749px) {

h2.banner__heading.h0 {
font-size: 2.9rem;
}

.banner__box {
padding: 4rem 1rem;
}

}

[kozacashmere]

I added the above text by cutting and pasting into the base.css file before the last }

I saved the file and checked and the word wrap still splits the word on my cell phone.

Just noticed that if I turn my phone to landscape the page loads without the funny word break.

Also, when I paste the text into the base.css I noticed that it does not have the indents that the other entries have.  Are those indents just to make reading the file easier or do they have some significance?

[kazi]

You should put it end of file not inside the last }

[kozacashmere]

I put it at the end of the file.

Nothing changed.

Thanks for your continued assistance