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;
}

Why do headers, h1 h2 etc.. create extra space around the text?

Add

margin:0;
padding:0;

In the CSS. Your browser gives the elements margins/padding by default, and you have to explicitly remove them.

Same font size for h1 and h2 in article

This is by design for <h1> tag to be behave like this i.e. size reduce specially for <article>, <aside>, <nav>, <section> and it will keep on decreasing as structure will become more deep i.e. <article> inside <article> inside <article> then size at each level will reduce.

Below is demo:

<!DOCTYPE html><html>
<head>  <title>Headings</title>  <meta charset="utf-8"></head>
<body>  <span>Default</span>  <h1>This is h1.</h1>  <h2>This is h2.</h2>  <h3>This is h3.</h3>  <h4>This is h4.</h4>  <h5>This is h5.</h5>  <h6>This is h6.</h6>  <hr>  <article>    <span>One level inside article tag</span>
    <h1>This is h1.</h1>    <h2>This is h2.</h2>    <h3>This is h3.</h3>    <h4>This is h4.</h4>    <h5>This is h5.</h5>    <h6>This is h6.</h6>    <hr>    <article>      <span>Two level inside article tag</span>
      <h1>This is h1.</h1>      <h2>This is h2.</h2>      <h3>This is h3.</h3>      <h4>This is h4.</h4>      <h5>This is h5.</h5>      <h6>This is h6.</h6>      <hr>      <article>        <span>Three level inside article tag</span>
        <h1>This is h1.</h1>        <h2>This is h2.</h2>        <h3>This is h3.</h3>        <h4>This is h4.</h4>        <h5>This is h5.</h5>        <h6>This is h6.</h6>        <hr>      </article>    </article>
  </article></body>
</html>

H1-H6 font sizes in HTML

I know this post is old. I came across it with the same question, where do they get this from. I think I found it.

It is a derivation of a pentatonic music scale. The Type scale is anyway. The Headings are taken from the Type scale, though not in a 1:1 order.

The scale goes:
8 9 10 12 14 16 18 21 24... The scale doubles in 5 steps (12 to 24). Each step is the base(12) times 2(the scale['it doubles']) to the power of i(step) divided by 5(ttl steps)['i/5'] - rounded to the nearest.

So h4 is the base, h3 is step 1, h2 is step 3, and h1 is step 5, or the octive of 12 on a pentatonic scale. h5 and h6 are 1 and 3 steps from base the other way.If I understand this, it would be the equivalent of a, E major chord.

That took me about 2 hours to figure out with a spreadsheet and an explanation of musical scales.

How to limit width of h1 - h5 tag by length of content

Seems like you are trying to reproduce a <fieldset> element. So why not use that element?

<form>
    <fieldset>
        <legend>Wählen sie das anzuzeigende Model</legend>
        <select id="selectModelDDL" onchange="createTable(this);">
            <option value="1">1</option>
        </select>
    </fieldset>
</form>

With the <fieldset> you will create the border around the elements where the <legend> is the text that is on the border.

Now you can just align the text to the center:

fieldset
{
    text-align: center;
    border: 1px solid black;
    border-radius: 15px;
    font-weight: bold;
    font-size: 13px;
    padding: 10px;
}

jsFiddle

Different behavior of heading tag with section

This is an browser custom styles)
Eg. h1 outside of section or aside have font-size: 2em, but in section, article, aside, nav have font-size: 1.5em
See in devtools.

:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.5em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
}

Outside of article, section, nav, aside h1 have this styles

h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}

If you don't want such surprises - reset browser styles with normalize.css )

What are the default margins for the html heading tags (h1, h2, h3, etc.)?

It's different regarding which browser, thus if you want a pixel-perfect design then practice is to "reset" those values to 0 (margin and padding) and set them yourself.

"CSS reset" is very common to front-end developers, a simple example of one i use :

html,body,blockquote,code,h1,h2,h3,h4,h5,h6,p,pre{margin:0;padding:0}
button,fieldset,form,input,legend,textarea,select{margin:0;padding:0}
fieldset{border:0}
a,a *{cursor:pointer}
div{margin:0;padding:0;background-color:transparent;text-align:left}
hr,img{border:0}
applet,iframe,object{border:0;margin:0;padding:0}
button,input[type=button],input[type=image],input[type=reset],input[type=submit],label{cursor:pointer;}
ul,li{list-style:none;margin:0;padding:0;}
strong{font-weight:bold;}
em{font-style:italic;}

How can I use overflow:hidden with a header tag

h2 {    width: 100%;    white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis;}

<h2>I want to keep the text of this header in single-line... the extra characters should be hidden</h2>

Width of Headers (H1, H2 etc)