Header element set to inline expands outside of container div - html

Question

Coding simple php/html/css site based on the CSS grid system at www.cssgrid.net
I have set my headers to display: inline to be able to print `back to top´ links on the same line as my section headers. Like this:
<h2 id="section1">Section 1</h2>
Back to top
This renders as follows (Stackoverflow doesn't support this, so imagine the bold text being a header)
Section 1 Back to top
This is all fine and dandy and just as I want, the problem comes on other places where I use headers, for example in the following context. (Please note that this is not a question weather or not to use CSS grid templates, but a question about headers. So please refrain from any comments about the general structure).
<div class="container" id="main">
<div class="row">
<div class="eightcol" id="first-div">
<h1>This is a header</h1>
<p>This is a p-tag</p>
</div>
<div class="fourcol last" id="second-div">
<div id="twitter">
<p>Twitter here</p>
</div>
</div>
</div>
</div>
This does not render right, at least not according to what I want. This renders as the following mockup shows:
main
--------------------------
| first-div | second-div |
| This is a header |
| This is a | Twitter |
| p-tag | here |
--------------------------
Perhaps not the most artistic ascii-render, but the point is that the header expands into the area of the div floated next to it.
What should I do to make it wrap in its containing div?
Edit:
I've created a fiddle with the code, the error does not occur there though. No idea what's going on. http://jsfiddle.net/nefGZ/

Answer 1

I believe I've found the problem.
If you inspect the header on Chrome (Edit as HTML), this is what you'll get:
<h1>HEJ och välkommen till Basårsmottagningens hemsida!</h1>
It's all those that's preventing the word wrap.
Edit by question author: Always check your copy pasted text, especially when pasting from PDF or Word.

Answer 2

put a
display: inline-block
style on the H1, and I think you will be fine