Cant seem to get elements on the correct lines

Question

Hello guys, So Ive added basehold.it to my webpage and discovered a lot of my elements were not on the correct line and it was kind of a mess. However i managed to put a few elements on the correct line by adding line-heights, padding-bottom and margin-bottom. However a few elements are still out of position and i cant seem to find the correct solution to putting them in their place.

''' <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Honeybadger</title> <link type="text/css" rel="stylesheet" href="normalize.css"/> <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:100,300,600' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="main.css"> </head> <body> <div id=header> <img src="images/logo.jpg"> <ul id="nav"> <li><a href="contact.html">Contact Us</a></li> <li><a href="decks.html">Decks</a></li> <li><a href="story.html">Our Story</a></li> </ul> </div> <div id="mission"> <p>Id iisque oporteat suscipiantur pro, mazim quidam nominavi ius id. Paulo ubique cetero pri no, diam vocent eu his. An eum ancillae sensibus. Per veritus nominati hendrerit ad. Eu mel alterum antiopam, vel graece cetero docendi an.</p> </div> <div id="unique"> <h2>A Unique Ride for You</h2> <p>Immo videri fortasse. Quare attende, quaeso. Aliter enim nosmet ipsos nosse non possumus. Paulum, cum regem Persem captum adduceret, eodem flumine invectio? Cum audissem Antiochum, Brute, ut solebam, cum M. Aliter enim nosmet ipsos nosse non possumus. Non enim, si omnia non sequebatur, idcirco non erat ortus illinc. Servari enim iustitia nisi a forti viro, nisi a sapiente non potest. Sic enim censent, oportunitatis esse beate vivere. Satis est ad hoc responsum. Collige omnia, quae soletis: Praesidium amicorum. Aut, Pylades cum sis, dices te esse Orestem, ut moriare pro amico?</p>

'''

and here is the CSS :

'''

html, body { min-height: 100%; height: 100%; font-family: 'Josefin Sans', sans-serif; margin: 0; }

html { background-image: url(http://basehold.it/i/24); // 24px }

/*************************************** Heading ***************************************/

width: 70%;
height: 20%;
margin-left: 15%;
margin-right: 15%;
padding-bottom: 2.85em;
border-bottom: 1px solid #7F7E7E;

}

header img {

width: 40%;
height: 100%;
float: left;

}

nav li {

list-style: none;
display: inline-block;
text-align: center;
font-family: 'Josefin Sans', sans-serif;
font-weight: 500;
font-size: 1.25em;
line-height: 3.40;
float: right;
margin-top: 40px;
margin-bottom: 40px;
margin-right: 40px;
color: #656565;

}

nav a {

position: relative;
color: #656565;
text-decoration: none;

}

nav a:before {

content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;

}

nav a:hover:before {

visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);

}

/*************************************** Mission ***************************************/

mission {

clear: both;
width: 70%;
height: 40%;
text-align: center;
line-height: 1.4;
margin-left: 15%;
margin-right: 15%;
padding-top: 1.75em;
color: #7F7E7E;
background-color: #fcfcfc;
border-collapse: collapse;
border-bottom: 1px solid #7f7e7e;

}

mission p {

margin-left: 15%;
margin-right: 15%;
padding-bottom: 3.5em;
width: 70%;
word-break: break-all;
font-size: 1.125em;
font-weight: 100;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);

}

mission:hover {

color: #c18a53;

}

/*************************************** Body/Content ***************************************/

unique {

width: 70%;
height: 42.5%;
margin-top: 5%;
margin-left: 15%;
margin-right: 15%;
border-bottom: 1px solid #7f7e7e;

}

unique h2 {

font-size: 2em;
line-height: 1.90;

}

unique p {

color: #656565;
width: 600px;
text-align: left;
font-weight: 300;
font-size: 1.125em;
line-height: 1.43;
margin-top: -1em;
margin-bottom: 2em;

}

'''

If anyone can help me it would be much appreciated. Thank you, Santos,

Answer 1 · 2014-11-22T00:59:31Z

November 22, 2014 12:59am

Ok so there are some new attributes I didn't know existed here (am self taught). http://codepen.io/anon/pen/NPPozv

So I think the main issue you're have is with floating elements, especially in the header. If you declare a float (such as logo & nav), in my experience you usually have to float the parent container too (e.g. header). Also remember to clear your floats for new sections, such as Mission and Unique.

Please spend a little time to study my code against yours, as I removed a few things that weren't really doing anything. Height can only be set in % if the position is fixed or absolute.

:)

Welcome to the Treehouse Community

Looking to learn something new?

Santos King