Thanks Mike.
I don’t think I explained the issue very well.
I have a color section at the bottom of my pages with a background image added that is a transparent .png with a subtle grunge/fade.
Because of this, the text in my pages doesn’t reach down over this color section and there’s a lot of extra space at the bottom of the main content.
I wondered if there’s a way to make this space smaller so there’s not so much white space at the bottom of the text area of my site. I’ll upload a screenshot in the PC.

Sure, in PC below.

It must not be showing now because I removed the border color from the main content area for another reason, so we can consider that resolved.
Where the blog author name shows up under a blog post title, I’d like to disable that link. Can you provide CSS to do that, please?

Hello,
I deactivated the plug-ins, cleared my cache and the the results were the same.

When I set the blog layout to Advanced Editor, it won’t let me lower any elements and the round circle ‘thinking icon’ just keeps going.

When I set it to Single (or Multi) Author, all the blog posts disappear from the blog page.

From from my research I see that this is common issue so I’m sure you’ve figured out a cause and solution. Please advise.

I’m using Chrome Version 67.0.3396.99 (Official Build) (64-bit).

The code still isn’t coming up for me? Please advise! Thanks.

I appreciate that but before I go forward, I’d like the questions I asked above answered:
Again – I’ve started re-building my site now for a month and so far haven’t used a child theme.
Now that I need to add some codes to the header, I see that I should have this.
– Will there be any problems with what I’ve created so far if I add a Child Theme now (I have made a lot of custom CSS in the dashboard and some changes to functions.php)?
– Is there a better/easier option for added codes to the header outside of installing a Child Theme?

Thank you! Can you offer CSS to set a boxed layout to a specific page?

That didn’t work.
I’ll post my info. in the PC in case you could take a look?
The blog post page is the ‘Articles + Tips’ page.

Thanks Rikard, but that doesn’t seem to work either.

Can you give me an example of what the code for the horizontal rule would look like? Maybe that’s part of the problem?

Hmm, I had tried that before but when I did just now it WORKED!
Thank you Mike! :)

Well it would be several and more to come in the future – can you tell me how I can target individual pages (where to find their ID number?) and what custom CSS I must use. I’ll post a link to one example of a page in the PC below.
Thanks!

That is a perfect solution, thank you so much Mike! :D

Hello,
I’m following up on this topic again with an issue that’s occurring on tablets size 768 x 1024.
On devices that size, I’d like to have the link and social media icons stacked like we have set up for mobile… but instead right now the entire long opt-in is showing (that is what I want for desktop) for this size when I check my site at:
http://responsivedesignchecker.com/checker.php?url=https%3A%2F%2Fwww.new.barrelracingtips.com&width=1400&height=700

Here’s the CSS I have for this on mobile… wasn’t sure which parts I should update?

@media only screen and (max-width: 767px) {
#custom_html-4.widget {
/*aligns the FB like button script (a custom html widget in the “header” widget area)*/
width: 50px !important;
padding: 12px 0px 0px 70px !important;
display: inline-block !important;
float: left !important;
}
}

@media only screen and (max-width: 479px) {
/*makes SM icons appear in small top bar on mobile*/
.responsive #top #wrap_all #header .social_bookmarks, .responsive #top #wrap_all #main .av-logo-container .social_bookmarks {
display: block !important;
}
}

@media only screen and (max-width: 989px) and (min-width: 768px) {
/*makes SM icons appear in small top bar on mobile*/
.responsive.html_mobile_menu_tablet #top #header #header_meta .social_bookmarks {
display: block !important;
}
}

@media only screen and (max-width: 426px) {
.sub_menu h6 a{
/*puts small bar opt-in link centered below social media icons in small top bar on mobile*/
margin-left: 25% !important;
margin-top: -25px !important;
}
}

@media only screen and (max-width: 767px) {
/*size and spacing of SM icons on mobile*/
.social_bookmarks a{
font-size:10px;
margin-top:-2px!important;
}}

@media only screen and (max-width: 767px) {
/*size and spacing for small header bar text on mobile*/
#header_meta h6 a{
font-size:12px!important;
margin-top:-33px!important;
}}

I switched things up again and used the code you recommended with the 100% width.
Everything it looking good now except there is too much space below the dashed line on mobile only.
Any CSS I have used doesn’t get a result at all.

Here’s what I’m using:

#top #wrap_all h3.av-special-heading-tag {
margin-top: -10px;
border-bottom: 2px dashed #CCBDB8!important;
padding-bottom: 10px;
width: 100%;
}

@media only screen and (max-width: 767px) {
#top #wrap_all h3.av-special-heading-tag {
margin-top:-20px!important;
}
}

Thanks Ismael, I got that to work! :)