Need to edit page titles for Mobile View

Hi,

I want to make the header of pages responsive for mobile viewing and have 2 main problems:

  1. Currently titles with long words get split or cut off.
  2. Page title appears in header and body. I only want it to appear once, ideally in the header.

I am a novice with managing a website - I’ve looked up the issue in similar threads on the forum and tried to use CSS accordingly but with no joy.
I’ve created a child theme and added CSS to the style.css but nothing happens in relation to page header
I’ve tried to add CSS to the custom CSS section but also nothing happened.
I’ve managed to solve problem on home page (front page) header by editing font size in jumbotron controls.

I’ve done something I’m not sure how to correct when I was trying to fix the problem - the screen appears half white in mobile view when you scroll across some pages.
Screenshots are attached of mobile view and below message is all the CSS I’ve added in custom CSS. Can you show me if any of this is wrong?

I’d really appreciate some help, especially on how to add CSS properly to child theme as I know this is the ideal way to edit website.

Many thanks,
R

Custom CSS Added:

#header .bottom-header h2 {
margin: 0 0 50px;
line-height: .74;
font-weight: 900;
font-size: 00px;
color: #ffffff;
text-transform: uppercase;
}

/Button hover color/
#header .bottom-header .header-button-two:hover {
background: #993399;
}

#header .bottom-header .header-button-one:hover {
background: #993399;
border: #993399;
}

#header .bottom-header .header-button-one {
background: #339966;
font-size: 30px;
}

#header .bottom-header .header-button-two {
background: #339966;
font-size: 30px;
}

#header .bottom-header h2 {
margin: 0 0 50px;
line-height: .74;
font-weight: 900;
font-size: 30px;
color: #ffffff;
text-transform: uppercase;
}

/below hides mobile menu/
.open-responsive-menu { display: none !important; }

.widget_illdy_skill {
display: none!Important;
}