Custom H1 Tag causing slight problems

I am trying to create a custom h1 tag for my blog. If you go to https://www.jonathancrowe.com – you can see my blog posts are H1 tags. I want it to be exactly like that, but I don’t want that line to go all the way to the end. Only as far as the text is for the particular blog post.

Now when I add the float: left; to the CSS for my H1 tag, it does what I want, but then my blog post content gets all shifted around. Here is a screen shot of the H1 tag I want, but then the BLOG’s CONTENT gets shifted up. https://www.jonathancrowe.com/screenshot.jpg

here is the CSS I am using for LIVE CURRENT example.

h1.storytitle {
	margin: 0 0 5px 0;
	font-size:30px;
	text-transform: lowercase;
	font-weight:normal;
	font-style:italic;
	display:block;
	background:url(/headerline.png) repeat-x bottom;
	max-width:500px;
	}