Horizontal line under header element?

I'm looking to create a line 5px thick to display under the global site header element, doesnt seem to be working with the following.

.site-header {
border-bottom: 5px solid #000000;
}

Also doesnt seem to want to work with .inside-header.

I ideally need this to display on all devices.

Ps,

.main-navigation {
border-bottom: 1px solid #000;
}

seems to work for mobile but any bigger than that and it displays under the nav bar, unless full desktop mode where it doesnt display at all?

Cheers for any potential help, the site is barrowreviews.co.uk