CSS Control of Borders around Header Area

Dear Support,
I’ve used the following custom CSS to turn off the borders that are on the top and bottom of the header/logo area:

div#header_main, div#header_meta {
border-top:none;
border-bottom:none;
}

However, isn’t there a better way to do this? I see that there is a “Border Color” in the “Logo Area”, but that color isn’t the one I see when I modify it. For example, I set it to pink, but still see the dark grey. (Screenshots linked below.)

https://www.dropbox.com/s/2ioorx7m71ahuvw/Screen%20Shot%202017-11-27%20at%2009.07.10.png?dl=0
https://www.dropbox.com/s/8knxhjk8bisgwl8/Screen%20Shot%202017-11-24%20at%2011.27.06.png?dl=0

So, is there a way to control those borders without having to use the custom CSS?

Thank you for your help.

Cheers,

Tim