I added a h7 to my css:
Content h7 {
color: #bf0000;
font-size: 22px;
margin: 30px 0 0 0;
}
But when I apply it in the html, the bottom margin is not working as it should. Have not been able to figure out what the problem is. You can see it in action on my home page in my signature, the heading, “How Does it Work?” As you can see, the bottom margin is not 0, as there is a lot of space between the heading and the text below.
‘How does it work’ is an h6…
Yes, there’s no such thing as an <h7> element.
But even an <h6> is not warranted here. Headings have a meaning, and it’s misusing them to have them peppered all over a page with no logical order. An <h1> is for the main heading of the page, and then, if you need to divide up the content into sub-sections, title them with <h2>. If those subsections themselves have subsections, then break them up with <h3>s, and so on. Try to avoid using the various headings based on their appearance. 
OK, this is a whole new concept to me, I normally use them to achieve a particular appearance. So I assume that appropriate way to do that is with css.
Yes
+1
Each HTML element has a meaning—otherwise known as “semantics”—so each time you use an element, it’s best to think in terms of “what does this element tag mean?” when you are writing your markup.
CSS was developed as a separate “layer” of the page to deal with appearance, so whenever appearance is an issue—that is, visual design—think in terms of CSS styling.
While developing a site, it’s a good idea to turn off CSS at some point and see if the HTML itself “makes sense”. For example, is there a logical sequence of headings?
You can style each element pretty much any way you want, so if you find that you must have multiple H2s styled differently from each other, you can easily style them separately. (A good example might be having the H2s in a sidebar styled differently from H2s in the main content.)