Element gets nested inside another element when it shouldn't

Question

For some reason, when I have the HTML that lays out the header ("dantdj") and the navigation bar in this format:

        <div class="header">
            <nav>
                <ul class="nav pull-right">
                    <li role="presentation" class="active" id="index">Home</li>
                    <li role="presentation" id="projects">Projects</li>
                    <li role="presentation" id="contact">Contact</li>
                </ul>
            </nav>   

            <h3 class="title">dantdj</h3>
        </div>

The following result occurs:

This is the style I want overall, but when adapting to smaller screen sizes with media queries, the navigation bar would go on top of the header, whereas I want the navigation bar to appear under the header in such a case.

However, when I have the HTML laid out like this, in order to fix the above problem:

        <div class="header">
            <h3 class="title">dantdj</h3>
            <nav>
                <ul class="nav pull-right">
                    <li role="presentation" class="active" id="index">Home</li>
                    <li role="presentation" id="projects">Projects</li>
                    <li role="presentation" id="contact">Contact</li>
                </ul>
            </nav>   
        </div>

The final result, while displaying properly on mobile, then appears like this on desktop:

How can I fix this? I assume it has something to do with the float rule on the navigation bar, but my attempts so far of trying different rules haven't worked.

Full code is in a JSFiddle here: JSFiddle

Answer 1

i would recommend moving the h3 before the nav to have those naturally collapse the way you want. modified css to make this work for desktop / mobile included:

the parts that changed

h3.title {
  display:inline-block; margin:10px 0;
}
nav {
  display:inline-block; float:right; margin:10px 0;
}

@media only screen and (max-width: 413px) {
 h3.title {
   display:block;
   margin-bottom: 10px;
 }
  nav {
    display:block; float:none;
  }
}

@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
        font-family: "Open Sans", sans-serif;
}

a {
    text-decoration: none;
    color: black;
}


.container {
    max-width: 730px;
    margin: auto;
}

.footer {
    padding-right: 15px;
    padding-left: 15px;
    font-size: 0.75em;
    text-align: right;
}

/* NAVIGATION */
footer, nav {
    display: block;
}

h3.title {
 display:inline-block; vertical-align:middle;  margin:10px 0;
}
nav {
 display:inline-block; vertical-align:middle; float:right; margin:10px 0;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.pull-right {
    float: right !important;
}

ul {
    margin-top: 0;
    margin-bottom: 10px;
}

.nav > li {
    position: relative;
    display: inline-block;
    padding: 10px;
    border-radius: 5px;
}

.active {
    background-color: #727272;
    color: white;
}

.active > a {
    color: white;
}

.title {
    font-size: 40px;
    font-family: 'Raleway', sans-serif;
}

.bio {
    font-size: 20px;
}

.email-btn {
    background-color: #e28e8e;
    border: none;
    padding: 10px;
    font-size: 20px;
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.feature-box {
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    background-color: #eeeeee;
}

.heading {
    font-size: 50px;
    font-family: "Raleway", sans-serif;
}

.email-btn:hover {
    cursor: pointer;
}

.nav > li:hover {
    cursor: pointer;
}

@media only screen and (max-width: 413px) {

    .title {
      display:block;
      margin-bottom: 10px;
    }

    nav {
      display:block; float:none;
    }
    
    .heading {
        font-size: 33px;
    }
    
    .pull-right {
        float: none !important;
        display: inline-block;,
        margin-bottom: 10px;
    }
    
    .email-btn {
        margin-bottom: 10px;
    }
}

<!doctype html>
    <body>
        <div class="container">
            <div class="header">
            
                <h3 class="title">dantdj</h3>
                
                <nav>
                    <ul class="nav pull-right">
                        <li role="presentation" class="active" id="index">Home</li>
                        <li role="presentation" id="projects">Projects</li>
                        <li role="presentation" id="contact">Contact</li>
                    </ul>
                </nav>   
                
            </div>

            <div class="feature-box">
                <div class="main">
                    <div class="heading">
                        Lorem ipsum dolor
                    </div>

                    <p class="bio">

                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in eros massa. Maecenas sit amet ullamcorper ipsum, eu molestie nibh.
                    </p>
                </div>

                <div class="projects">
                    <div class="heading">
                        See what I've been working on!
                    </div>
                </div>

                <div class="contact">
                    <div class="heading">
                        Contact me!
                    </div>
                </div>
            </div>
        </div>

      
    </body>

Answer 2

This seems to fix some (all?) of the problem:

<div class="container">
        <div class="header">
            <h3 class="title">dantdj</h3>
            <nav>
                ...

.title { margin: 0 0 10px 0; display: inline-block; } /* added. */

I think those are the only changes I made. The big one was display: inline-block;. Fiddle.