Change text color of only one heading/shift button down

Unless I'm missing something, March for Meals is not a heading <h1>, <h2> or <h3>.  It is a text link inside your navigation bar.   Is that the text color you want changed and if so why? 

Typically all hyperlinks are styled the same way to give users a visual indication of  which ones they have already visited and where they are on the site currently.   Consistent link styles are especially important when working with aged and disabled target users.  Please refer to the latest  Web Accessibility Guidelines.

What are the Web Content Accessibility Guidelines?

Link styles come from the 6 CSS pseudo-classes.

• a  -- any link
• a:link -- an unvisited link
• a: visited -- a visited link from the browser's history folder
• a:hover -- on mouseover (has no effect on touch screens)
• a:active -- on click / tap and hold
• a:focus -- on focus via tab or arrow keys

Easy one first.

I assume by 'heading March for Meals only' you are refering to the navigation item in the orche colored bar?

If so give your <li> tag a class name:

<li class="march-for-meals"><a href="march.html">March for <br>Meals</a></li>

Then add the below css selector to your css stylesheet:

.march-for-meals a {

color: brown;

}

Now for the more complex one.

Contain your social icons and the donate button in their own <divs>, wrapped in a parent <div> (see below)

<div class="social-icons-donate">

<div class="social-icons">

<a href="http://www.twitter.com/adtsrc_nc"><img src="images/twitter.png" title="Link to ADTS Twitter feed " width="35" height="35"  /></a> 

<a href="http://www.instagram.com/age_in_rockingham_county"><img src="images/instagram.png" title="Link to ADTS Instagram page " width="35" height="35"  /></a> 

<a href="http://www.facebook.com/adtsrc"><img src="images/facebook.png" title="Link to ADTS Facebook page " width="35" height="35"  /></a>

</div>

<!-- end social-icons -->

<div class="donate">

<a href="https://adtsrc.networkforgood.com/projects/68585-annual-campaign"><img src="images/Donate-Now.png" title="Click to donate to ADTSRC " height="35"  /></a>

</div>

<!-- end donate -->

</div>

<!-- end social-icons donate -->

</ul>

<!--end main-navigation-->

Then add the following css selectors to your css stylesheet:

.social-icons-donate {

display: flex;

flex-direction: column;

}

.social-icons {

display: flex;

justify-content: space-between;

}

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

.social-icons {

justify-content: center;

}

}