h2 不会与它上面的 h1 分开

Question

I have an h1 in a section with the nav.

Below it I have an h2 with a paragraph. I have the h2 and the paragraph in one div and the h1 and navbar in another, but the h1 and h2 are together and will not separate. If I put a border around the div with the h2 and paragraph tags, the border borders around the h1 and h2. As I have floated the h1 and nav, I have clear: both on the h2 and I've also tried clear:both on the div its in. Nothing is pulling these two elements apart. I've also tried a margin on the h2 and it's div.

HTML:

<div class="banner">

            <h1>JIMMY DAWSON</h1>


                <ul class="nav">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="thought.html">Thoughts</a></li>
                    <li><a href="#">Visuals</a></li>
                    <li><a href="#">About</a></li>
                </ul>

             </div>

        <div class="journal-section">

        <h2> Headline for the Journal</h2>

            <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</div>

CSS:

h2 {
    clear: both; }

.journal-section {
    width: 600px;
    margin: 30px 30px 0 30px;
    border: 1px solid red; }

Answer 1

I have check this codes on my browsers , and i cant find any issues and let me say one thing. when you have work with HTML every section have to be like blocks , that will be avoiding so many issues

eg:

you can add float:left; property or display:block;