Navigation menus stacking or is not lining up correctly below 847px x 998px

Question

Hi people! Need a hand here, so I am doing a responsive web design, for some reason when I reduce my window screen below 847px one of the nav menu drop down underneath the menu before it. Help please.....

HTML: <!DOCTYPE html> <html>

<body>

    <header>
    <a href="index.html" id="logo">
        <h1>thesite.site</h1>
        <h2>Freedom of travelling</h2>
    </a>
    <nav>
        <ul>
            <li><a href="index.html">Portfolio</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="signup.html" class="selected">Sign up</a></li>
        </ul>
    </nav>
    </header>

    <div id="wrapper">
    <section>
        <form action="signup.html" method="post">

        <h1 class="dark_text">Sign Up</h1>

        <br>

        <fieldset>

            <legend><span class="number">1</span> Your basic info</legend>

            <label for="name">Name:</label>
            <input type="text" id="name" name="user_name">

            <label for="mail">Email:</label>
            <input type="email" id="mail" name="user_email">

            <label for="passowrd">Password:</label>
            <input type="password" id="password" name="user_password">

            <label for="re_passowrd">Retype Password:</label>
            <input type="password" id="re_password" name="user_re_password">

            <label>Age:</label>
            <input type="radio" id="under_17" value="under_17" name="user_age">
            <label for="under_17" class="light">Under 17</label>

            <br>

            <input type="radio" id="over_17" value="over_17" name="user_age">
            <label for="over_17" class="light">17 or older</label>

        </fieldset>

        <fieldset>

            <legend><span class="number">2</span> Your profile</legend>

            <label for="bio">Biography:</label>
            <textarea id="bio" name="user_bio"></textarea>

            <label for="job">Travel frequent:</label>
            <select id="frequent" name="user_travel_frequent">
                <optgroup label="Frequent">
                    <option value="everyday">Every day</option>
                    <option value="every_week">Every week</option>
                    <option value="every_month">Every month</option>
                    <option value="once_every_couple_of_months">Once couple of months</option>
                    <option value="twice_a_year">Twice a year</option>
                    <option value="once_a_year">Once a year</option>
                </optgroup>
                    <optgroup label="Not so often">
                    <option value="once_every_couple_of_years">Once every couple of years</option>
                    <option value="now_and_then">Now and then</option>
                    <option value="Never">Never</option>
                </optgroup>

            </select>

            <label>Interests:</label>
            <input type="checkbox" id="travel_accompany" value="interest_accompany" name="user_interest">
            <label class="light" for="travel_accompany">Travel Accompany</label>

            <br>

            <input type="checkbox" id="affordable_travel" value="interest_affordable" name="user_interest">
            <label class="light" for="affordable_travel">Affordable Travel</label>

            <br>

            <input type="checkbox" id="classy" value="interest_classy" name="user_interest">
            <label class="light" for="classy">Classy Travel</label>

        </fieldset>

        <button type="submit">Sign Up</button>

      </form>
    </section>
    <footer>
        <a href="http://twitter.com/SteefVendy"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
        <a href="https://www.facebook.com/steef.vendy"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"></a>
        <p>&copy; 2015 Steef Vendy</p>
    </footer>
    </div>
</body>

</html>

CSS: /*********** GENERAL ************/

body { font-family: 'Open Sans', sans-serif; color: #384047; }

wrapper {

max-width: 940px;
margin: 0 auto;
padding: 0 5%;
clear: both;

}

a { text-decoration: none; }

img{ max-width: 100%; }

h3 { margin: 0 0 1em 0; }

/*********** HEADING ************/

header{ float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center;
margin: 0;

}

h1 { font-family: 'Cinzel', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2{ font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/*********** NAVIGATION ************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

/*********** FOOTER ************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

.social-icon { width: 30px; height: 30px; margin: 0 5px; }

/*********** PAGE: PORTFOLIO ************/

gallery {

margin: 0;
padding: 0;
list-style: none;

}

gallery li {

float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;

}

gallery li a p {

margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;

}

/*********** PAGE: ABOUT ************/

.profile-photo{ display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 5%; }

/*********** PAGE: CONTACT ************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }

.contact-info li.phone a { background-image: url('../img/phone.png') }

.contact-info li.mail a { background-image: url('../img/mail.png') }

.contact-info li.twitter a { background-image: url('../img/twitter.png') }

/*********** FORM ************/

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

form { max-width: 300px; margin: 10px auto; padding: 10px 20px; background: #f4f7f8; border-radius: 8px; }

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select { background: rgba(255,255,255,0.1); border: none; font-size: 16px; height: auto; margin: 0; outline: 0; padding: 15px; width: 100%; background-color: #e8eeef; color: #8a97a0; box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset; margin-bottom: 30px; }

input[type="radio"], input[type="checkbox"] { margin: 0 4px 8px 0; }

select { padding: 6px; height: 32px; border-radius: 2px; }

button { padding: 19px 39px 18px 39px; color: #FFF; background-color: #4bc970; font-size: 18px; text-align: center; font-style: normal; border-radius: 5px; width: 100%; border: 1px solid #3ac162; border-width: 1px 1px 3px; box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset; margin-bottom: 10px; }

fieldset { margin-bottom: 30px; border: none; }

legend { font-size: 1.4em; margin-bottom: 10px; }

label { display: block; margin-bottom: 8px; }

label.light { font-weight: 300; display: inline; } .dark_text { color: #384047; }

.number { background-color: #5fcf80; color: #fff; height: 30px; width: 30px; display: inline-block; font-size: 0.8em; margin-right: 4px; line-height: 30px; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,0.2); border-radius: 100%; }

@media screen and (min-width: 480px) {

form { max-width: 480px; }

}

/*********** COLORS ************/

/* site body */ body{ background-color: #fff; color: #384047; }

/* green header */ header{ background: #6ab47b; border-color: #599a68; }

/* nav background on mobile */ nav { background: #599a68; }

/* logo text */ h1, h2 { color: #fff; margin-bottom: 15px; }

/* links */ a{ color: #6ab47b; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover{ color: #32673f; }

NORMALIZE.CSS /*! normalize.css v1.1.0 | MIT License | git.io/normalize */

/* ========================================================================== HTML5 display definitions ========================================================================== */

/**

Correct block display not defined in IE 6/7/8/9 and Firefox 3. */

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }

/**

Correct inline-block display not defined in IE 6/7/8/9 and Firefox 3. */

audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }

/**

Prevent modern browsers from displaying audio without controls.
Remove excess height in iOS 5 devices. */

audio:not([controls]) { display: none; height: 0; }

/**

Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
Known issue: no IE 6 support. */

[hidden] { display: none; }

/* ========================================================================== Base ========================================================================== */

/**

1. Correct text resizing oddly in IE 6/7 when body font-size is set using
em units.
2. Prevent iOS text size adjust after orientation change, without disabling
user zoom. */

html { font-size: 100%; /* 1 / -webkit-text-size-adjust: 100%; / 2 / -ms-text-size-adjust: 100%; / 2 */ }

/**

Address font-family inconsistency between textarea and other form
elements. */

html, button, input, select, textarea { font-family: sans-serif; }

/**

Address margins handled incorrectly in IE 6/7. */

body { margin: 0; }

/* ========================================================================== Links ========================================================================== */

/**

Remove the gray background color from active links in IE 10. */

a { background: transparent; }

/**

Address outline inconsistency between Chrome and other browsers. */

a:focus { outline: thin dotted; }

/**

Improve readability when focused and also mouse hovered in all browsers. */

a:active, a:hover { outline: 0; }

/* ========================================================================== Typography ========================================================================== */

/**

Address font sizes and margins set differently in IE 6/7.
Address font sizes within section and article in Firefox 4+, Safari 5,
and Chrome. */

h1 { font-size: 2em; margin: 0.67em 0; }

h2 { font-size: 1.5em; margin: 0.83em 0; }

h3 { font-size: 1.17em; margin: 1em 0; }

h4 { font-size: 1em; margin: 1.33em 0; }

h5 { font-size: 0.83em; margin: 1.67em 0; }

h6 { font-size: 0.67em; margin: 2.33em 0; }

/**

Address styling not present in IE 7/8/9, Safari 5, and Chrome. */

abbr[title] { border-bottom: 1px dotted; }

/**

Address style set to bolder in Firefox 3+, Safari 4/5, and Chrome. */

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

/**

Address styling not present in Safari 5 and Chrome. */

dfn { font-style: italic; }

/**

Address differences between Firefox and other browsers.
Known issue: no IE 6/7 normalization. */

hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }

/**

Address styling not present in IE 6/7/8/9. */

mark { background: #ff0; color: #000; }

/**

Address margins set differently in IE 6/7. */

p, pre { margin: 1em 0; overflow: auto; }

/**

Correct font family set oddly in IE 6, Safari 4/5, and Chrome. */

code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }

/**

Improve readability of pre-formatted text in all browsers. */

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

/**

Address CSS quotes not supported in IE 6/7. */

q { quotes: none; }

/**

Address quotes property not supported in Safari 4. */

q:before, q:after { content: ''; content: none; }

/**

Address inconsistent and variable font size in all browsers. */

small { font-size: 80%; }

/**

Prevent sub and sup affecting line-height in all browsers. */

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/* ========================================================================== Lists ========================================================================== */

/**

Address margins set differently in IE 6/7. */

dl, menu, ol, ul { margin: 1em 0; }

dd { margin: 0 0 0 40px; }

/**

Address paddings set differently in IE 6/7. */

menu, ol, ul { padding: 0 0 0 40px; }

/**

Correct list images handled incorrectly in IE 7. */

nav ul, nav ol { list-style: none; list-style-image: none; }

/* ========================================================================== Embedded content ========================================================================== */

/**

1. Remove border when inside a element in IE 6/7/8/9 and Firefox 3.
2. Improve image quality when scaled in IE 7. */

img { border: 0; /* 1 / -ms-interpolation-mode: bicubic; / 2 */ }

/**

Correct overflow displayed oddly in IE 9. */

svg:not(:root) { overflow: hidden; }

/* ========================================================================== Figures ========================================================================== */

/**

Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */

figure { margin: 0; }

/* ========================================================================== Forms ========================================================================== */

/**

Correct margin displayed oddly in IE 6/7. */

form { margin: 0; }

/**

Define consistent border, margin, and padding. */

fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/**

1. Correct color not being inherited in IE 6/7/8/9.
2. Correct text not wrapping in Firefox 3.
3. Correct alignment displayed oddly in IE 6/7. */

legend { border: 0; /* 1 / padding: 0; white-space: normal; / 2 / *margin-left: -7px; / 3 */ }

/**

1. Correct font size not being inherited in all browsers.
2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
and Chrome.
3. Improve appearance and consistency in all browsers. */

button, input, select, textarea { color: inherit; font: inherit; font-size: 100%; /* 1 / margin: 0; / 2 / vertical-align: baseline; / 3 / *vertical-align: middle; / 3 */ }

/**

Address Firefox 3+ setting line-height on input using !important in
the UA stylesheet. */

button, input { line-height: normal; overflow: visible; }

/**

Address inconsistent text-transform inheritance for button and select.
All other form control elements do not inherit text-transform values.
Correct button style inheritance in Chrome, Safari 5+, and IE 6+.
Correct select style inheritance in Firefox 4+ and Opera. */

button, select { text-transform: none; }

/**

1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native audio
and video controls.
2. Correct inability to style clickable input types in iOS.
3. Improve usability and consistency of cursor style between image-type
input and others.
4. Remove inner spacing in IE 7 without affecting normal text inputs.
Known issue: inner spacing remains in IE 6. */

button, html input[type="button"], /* 1 / input[type="reset"], input[type="submit"] { -webkit-appearance: button; / 2 / cursor: pointer; / 3 / *overflow: visible; / 4 */ }

/**

Re-set default cursor for disabled elements. */

button[disabled], html input[disabled] { cursor: default; }

/**

1. Address box sizing set to content-box in IE 8/9.
2. Remove excess padding in IE 8/9.
3. Remove excess padding in IE 7.
Known issue: excess padding remains in IE 6. */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 / padding: 0; / 2 / *height: 13px; / 3 / *width: 13px; / 3 */ }

/**

1. Address appearance set to searchfield in Safari 5 and Chrome.
2. Address box-sizing set to border-box in Safari 5 and Chrome
(include -moz to future-proof). */

input[type="search"] { -webkit-appearance: textfield; /* 1 / -moz-box-sizing: content-box; -webkit-box-sizing: content-box; / 2 */ box-sizing: content-box; }

/**

Remove inner padding and search cancel button in Safari 5 and Chrome
on OS X. */

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/**

Remove inner padding and border in Firefox 3+. */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/**

1. Remove default vertical scrollbar in IE 6/7/8/9.
2. Improve readability and alignment in all browsers. */

textarea { overflow: auto; /* 1 / vertical-align: top; / 2 */ }

/**

Don't inherit the font-weight (applied by a rule above).
NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */

optgroup { font-weight: bold; }

/* ========================================================================== Tables ========================================================================== */

/**

Remove most spacing between table cells. */

table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

RESPONSIVE.CSS @media screen and (min-width: 480px) {

/***********
TWO COLUMN LAYOUT
************/

    #primary {
        width: 50%;
        float: left;
    }

    #secondary {
        width: 40%;
        float: right;
    }


/***********
PAGE: PORTFOLIO;
************/

#gallery li {
    width: 28.3333%;
}

#gallery li:nth-child(4n) {
    clear: left;
}


/***********
PAGE: ABOUT
************/

.profile-photo {
    float: left;
    margin: 0 5% 80px 0;
}

}

/***********
HEADER
************/

@media screen and (min-width: 660px) {

nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;

}

#logo {
    float: left;
    margin-left: 5%;
    text-align: left;
    width: 45%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 0.825em;
    margin-bottom: 20px;
}

header {
    border-bottom: 5px solid #599a68;
    margin-bottom: 60px;
}

}

Answer 1 · 2015-11-06T10:06:35Z

November 6, 2015 10:06am

Hey Steef,

I just checked your site and i noticed a few things.

That last item in your navigation drops underneath the others because the widht of the parent nav element is too small to contain all of the items on 1 line. Now your nav width is 45% if you give this a higher value it should work.

Dont forget to give your id of logo (#logo) a smaller width too when you make the nav element bigger.

Answer 2 · 2015-11-05T13:05:02Z

November 5, 2015 1:05pm

Hi,

I would love to help you but it's a bit hard to find out what's going wrong on this way.

Do you have an online version of this by any chance? It will be alot easier to help u.

Welcome to the Treehouse Community

Looking to learn something new?

Steef Vendy

Steef Vendy

Navigation menus stacking or is not lining up correctly below 847px x 998px

wrapper {

logo {

gallery {

gallery li {

gallery li a p {

2 Answers

Stanley Thijssen

Stanley Thijssen

Steef Vendy

Steef Vendy

Stanley Thijssen

Stanley Thijssen

Steef Vendy

Steef Vendy