How to stop border-bottom width from overlapping / overflowing onto float-right div

Question

The h1 with the border:

h1 {
  font-size: 2.125em;
  border-bottom: 1px solid #aaa;
  width: 100%;
  display: block;
}

The float-right "Contents":

div {
  float: right;
  clear: right;
  margin-bottom: .5em;
  padding: .5em 0 .8em 1.4em;
  background: transparent;
  max-width: 20em;
}

How do I remove the lines piercing the Contents section to the right?

Answer 1

If you want to remove the lines where the contents begin you can just add background: #fff; to contents div style.
And if border-bottom must be only under "The Rules" and "Character Setup" you can use text-decoration: underline; instead of border-bottom: 1px solid #aaa; or wrap every h1 in div and add to wrapped h1 display: inline-block;