annseely

Site URL: https://www.annseely.com/

I am trying to create a line under my navigation bar that looks like the one on this website : https://designformankind.comconver

I've been able to successfully get the double lines under my navigation using this code:

header#header {
    border-bottom: 1px solid white;
}
header#header:after {
    content: "";
    display: block;
    height: 1.5px;
    width: 100%;
    background: hsla(223, 8%, 15%, .25);
    position: absolute;
    bottom: 16px;
}
header#header:before {
    content: "";
    display: block;
    height: 1.5px;
    width: 100%;
    background: hsla(223, 8%, 15%, .25);
    position: absolute;
    bottom: 19px;
}

However, when I reduce the width, I can't get it to center; it stays left justified. How do I reduce the width and have it centered?

I would like to split my top  navigation in 7.1 into two levels, with the top bar in a different color than the main header navigation. I see lots of tutorials for how to do this in 7.0 but not 7.1.

I'm not seeing a place to set the Monospace font in the style editor. I see the Meta font. Am I missing something?

I'm working on my first site in 7.1 and I'm frustrated with the massive amount of space after a header when I do a hard return,

For example, if I have one line in H1, hit return, there is a large space between the first line and the second one, whether it's a paragraph or another header, 

Is the any way to reduce the spacing when I do a hard return after a heading? Tweaking line height in the style editor doesn't help. 

I would like to replace the titles on each of blog posts with a graphic that has the title on it. So it needs to be site wide. I can see how to remove the blog post titles from the summary page and block, and from specific blog posts, but I to have it on every blog post.