Have h2 inline to h1 and floated to the right in heading - html

Question

I'm trying to align my h2 to the right side of the header while keeping the same vertical orientation as it is right now, but float right does not seem to work. Any ideas?
<div class="header-bg">
<h1>
Heading
</h1>
<h2>
this is where you write more things
</h2>
</div>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact Me</li>
<li>About</li>
</ul>
Here is the CSS:
body {
margin: 0;
}
.header-bg {
background: lightblue;
}
h1, h2 {
display: inline-block;
margin: 10px 10px;
/* border: solid black 1px; */
}
}
h2 {
/* border: solid black 1px; */
float: right;
}
ul {
clear: both;
list-style: none;
margin: 0;
padding: 0;
background: #333;
overflow: hidden;
}
Here is the link to jsfiddle: https://jsfiddle.net/n8xjk4ax/3/

Answer 1

First, remove the extraneous }, like the comments say.
Now with the h2 floating, it will no longer be on the same baseline as the h1. If you do want them to be, there are several possibilities.
Don't float it, but justify-align the items in the container
body {
margin: 0;
}
.header-bg {
background: lightblue;
padding: 10px;
text-align: justify;
-moz-text-align-last: justify;
text-align-last: justify;
}
h1, h2 {
display: inline-block;
margin: 0;
/* border: solid black 1px; */
}
ul {
clear: both;
list-style: none;
margin: 0;
padding: 0;
background: #333;
overflow: hidden;
}
li a {
display: block;
color: white;
text-decoration: none;
text-align: center;
padding: 14px 16px;
}
li {
float: left;
}
li:last-child {
float: right;
}
li a:hover {
background-color: #111;
color: white;
}
<div class="header-bg">
<h1>
Heading
</h1>
<h2>
this is where you write more things
</h2>
</div>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact Me</li>
<li>About</li>
</ul>
or if you do want to float, the container will also need overflow:hidden to account for narrow screens. And you should give the h1 and the h2 the same metrics. Using line-height is most straightforward.
body {
margin: 0;
}
.header-bg {
background: lightblue;
overflow:hidden;
}
h1, h2 {
display: inline-block;
margin: 0 10px;
line-height: 4rem;
/* border: solid black 1px; */
}
h2 {
/* border: solid black 1px; */
float: right;
}
ul {
clear: both;
list-style: none;
margin: 0;
padding: 0;
background: #333;
overflow: hidden;
}
li a {
display: block;
color: white;
text-decoration: none;
text-align: center;
padding: 14px 16px;
}
li {
float: left;
}
li:last-child {
float: right;
}
li a:hover {
background-color: #111;
color: white;
}
<div class="header-bg">
<h1>
Heading
</h1>
<h2>
this is where you write more things
</h2>
</div>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact Me</li>
<li>About</li>
</ul>