Black line at bottom of header image

Hi everyone,

I'm not a pro CSS person, but I'm using this code to put a header image at the top of every page: 

a {text-decoration-line:none !important;}
.header-announcement-bar-wrapper {background-image:url('URL HERE'); background-repeat:no-repeat; background-size:cover;background-position: center;} .header {background-color:rgba(0,0,0,0)!important}

It works. 

Now I want to add a thin black line at the bottom to separate it from the page. Like 2 pixels. I've tried putting it into my image and that causes huge problems with different renderings, especially mobile, but it also renders differently on different browsers and widths. Is there a CSS way to add a black line all across my banner image at the very bottom? 

Thank you. 

Hi,

What is your site url? We can test code easier

Oh, sorry: 

www.infinitegameoflife.com

The main questions I have are: 

1. How can I make the header less tall? If I make a shorter image, it gets resized, so it seems like it's always that height. 

2. The navigation words are all in a particular width. Is it possible to extend that width so it's wider? If I increase the space between navigation words, it just wraps to a new line. 

3. For a black line at the bottom, SS support says there isn't a way to do it in the header. I can't do it outside of the header or it will scroll away, so I don't see a way to add the black line without some kind of code injection. 

At the moment, #1 and 2 are my bigger problems. I don't expect to do anything about #3. 

Thanks. 

#1. Add to Design > Custom CSS

.header-title-logo img {
    max-height: 100px;
}
.header-announcement-bar-wrapper {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}
.header-nav {
    position: relative;
    bottom: -10px;
}

#2. Use this CSS

nav.header-nav-list {
    flex-wrap: nowrap;
}

#3. Use this CSS

.header-announcement-bar-wrapper {
    border-bottom: 3px solid red;
}