CSS H1 - Only as Wide as the Text

Width of Headers (H1, H2 etc)

I would use

#rightcol h1, #rightcol h2, #rightcol h3, #rightcol h4, #rightcol h6, #rightcol h6 {
   float:left;
   clear:left;
}
#rightcol p {clear:left;}

edit after comment

If the containing div is floated, the clear won't clear the left col. So float rightcol left and remove the margin

#rightcol {
   float:left;
   padding:70px 20px 20px 0px;
   width:585px;
}

Width of a H1 element

so the html structure is not ideal. I run the code and I added to the .dropdown class the following:
width:100px;float:right;
If the the dropdown element takes the whole screen it will hover across the screen. You specify text-align:right but the div still occupies the whole screen. The code I provided it will work but is not a great solution, it will misbehave in different viewport sizes. To do this the right way you probably need to use flexbox. Highly recommend to see this guide.

Make h1 tag the same maximum width regardless of capitalization of text within

Control the Overflow

The real trick is just setting a limit on size of the text box, and making sure that there aren't overflow problems. You can use overflow: hidden to take care of this, and display: block the element in order to give it the exact dimensions you need.

Monospace is Optional

Yes, you can use a monospace font.. there are only a few to choose from if you want a cross-browser solution. You can use a variable-width font, too.. the monospace will just help you get consistency with the capitalization problem you described. Using a monospace font will help you to choose a good width that will work for different text lengths. In my example below, I've arbitrarily chosen a width of 250 pixels, and typed strings until they were well past the limit, just for the purposes of illustration.

Line-heights and Margins

You want the line height of the text to match the height of the box.. in this case, I've used 20 pixels. If you need to create line height, you can add a bottom margin.

Side note: I've used an h3 here, because the text is repeated many times across the page. In general it's a better choice to use a lower level of header for more common text (just a semantic choice). Using an h1 will work the same way..

<html>
<head>
<title>h1 stackoverflow question</title>
<style type="text/css">

* { margin:0; padding:0 }

h3 { 
    display: block;
    width: 250px;
    height: 20px;
    margin-bottom: 5px;
    overflow: hidden;
    font-family: Courier, Lucidatypewriter, monospace;
    font: normal 20px/20px Courier;
    border: 1px solid red;
}

</style>
</head>
<body>

<h3>Hello, World</h3>
<h3>Lorem Ipsum dolor sit Amet</h3>
<h3>Adipiscing Lorem dolor sit lorem ipsum</h3>
<h3>"C" is for Cookie, that's good enough for lorem ipsum</h3>
<h3>Oh, it's a lorem ipsum dolor sit amet.  Adipiscing elit.</h3>

</body>
</html>

How to prevent headings (h1) from taking up more width than they need?

You can give it display: inline. This will make it behave like any text element - the default for <h1> is display: block.

There are other ways: float: left for example, but I find this the simplest and the one with the fewest side effects.

Note that you will then probably have to add a <br> to ensure a line break after the <h1>.

How do I set a background-color for the width of text, not the width of the entire element, using CSS?

Put the text in an inline element, such as a <span>.

<h1><span>The Last Will and Testament of Eric Jones</span></h1>

And then apply the background color on the inline element.

h1 {
    text-align: center; 
}
h1 span { 
    background-color: green; 
}

An inline element is as big as its contents is, so that should do it for you.