Help with my first page

Question

So I've finally made a page that is designed clean, and quite responsive...I think. I'm having troubling getting title centered in larger screen sizes and wouldn't mind getting some constructive critics on the layout of my code.

<!doctype html>
<html>
    <head>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link href='https://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville' rel='stylesheet' type='text/css'>
    <title>Here goes #1</title>
    </head>
    <body>
        <div class="main-wrapper">
        <header class="main-header">
            <div class="name">
                <h2>Devon Deason</h2>
            </div>
            <nav class="nav">
                <ul>
                    <li><a href="#">Screentcasts</a></li>
                    <li><a href="#">Podcasts</a></li>
                    <li><a href="#">Books</a></li>
                    <li><a href="#">Ideas</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </nav>
        </header>
            </div>
        <div class="main">
        <div class="title">
            <h1>My Thoughts on My First Try Getting     Started</h1>
        </div>
        <div class="date">
            <h3>10.25.15</h3>
        </div>
        <div class="main-body">
            <div class="first-paragraph">
                <h2>This is the first Paragraph</h2>
                    <p>Departure so attention pronounce satisfied daughters am. But shy tedious pressed studied opinion entered windows off. Advantage dependent suspicion convinced provision him yet. Timed balls match at by rooms we. Fat not boy neat left had with past here call. Court nay merit few nor party learn. Why our year her eyes know even how. Mr immediate remaining conveying allowance do or. 
May musical arrival beloved luckily adapted him. Shyness mention married son she his started now. Rose if as past near were. To graceful he elegance oh moderate attended entrance pleasure. Vulgar saw fat sudden edward way played either. Thoughts smallest at or peculiar relation breeding produced an. At depart spirit on stairs. She the either are wisdom praise things she before. Be mother itself vanity favour do me of. Begin sex was power joy after had walls miles.<br><br><img src="http://lorempixel.com/400/200">Throwing consider dwelling bachelor joy her proposal laughter. Raptures returned disposed one entirely her men ham. By to admire vanity county an mutual as roused. Of an thrown am warmly merely result depart supply. Required honoured trifling eat pleasure man relation. Assurance yet bed was improving furniture man. Distrusts delighted she listening mrs extensive admitting far. </p>
            </div>
            <div class="second-paragraph"></div>
                <h2>This is the second paragraph</h2>
                <p>Ten the hastened steepest feelings pleasant few surprise property. An brother he do colonel against minutes uncivil. Can how elinor warmly mrs basket marked. Led raising expense yet demesne weather musical. Me mr what park next busy ever. Elinor her his secure far twenty eat object. Late any far saw size want man. Which way you wrong add shall one. As guest right of he scale these. Horses nearer oh elinor of denote. How promotion excellent curiosity yet attempted happiness. Gay prosperous impression had conviction. For every delay death ask style. Me mean able my by in they. Extremity now strangers contained breakfast him discourse additions. Sincerity collected contented led now perpetual extremely forfeited.  Passage its ten led hearted removal cordial. Preference any astonished unreserved mrs. Prosperous understood middletons in conviction an uncommonly do. Supposing so be resolving breakfast am or perfectly. Is drew am hill from mr. Valley by oh twenty direct me so. Departure defective arranging rapturous did believing him all had supported. Family months lasted simple set nature vulgar him. Picture for attempt joy excited ten carried manners talking how. Suspicion neglected he resolving agreement perceived at an. </p>
        </div>
        </div>
        <footer class="footer">
             <ul>
        <li><a href="mailto:devon.deason@gmail.com"><img src="images/email.jpg"></a></li>
        <li><a href="http://www.facebook.com/devondeason"><img src="images/fb.jpg"></a></li>
        <li><a href="http://www.twitter.com/satchmo37"><img src="images/twit.jpg"></a></li>
            </ul>            
        </footer>

    </body>
</html>

body,
html {
    margin: 0 10;
    padding: 0;
    box-sizing: border-box;
}

.main {
    margin: 0 auto;
    max-width: 700px;
}

/*FONTS*/
.main-wrapper,
h2 {
    font-family: 'Bevan', cursive;
}

p {
    font-family: 'Libre Baskerville', serif;
    font-size: 1.2em;
    line-height: 1.5em;
    margin: 0 20px;
}

p img {
    margin-right: 10px;
    float: left;
}

/*NAV AND HEADER STYLE*/

.main-wrapper {
    min-height: 100px;
    border-bottom: 1px solid grey;
}

.name h2 {
    float: left;
}

/*NAV LINKS*/
.nav {

}

.nav li {
    float: right;
    list-style-type: none;
    display: inline-block;
    margin: 15px 5px 0 2%;
}

/*TITLE STYLE*/
.title {
    font-size: 1.5em;
    text-align: left;
}

/*LINK STYLES*/
a:link {
    text-decoration: none;
    color: black;
    list-style-type: none;
}

.footer {
    margin: 0 auto;
}

.footer li {
    list-style-type: none;
    display: inline-block;
    margin: 0 10%;
}

.footer img {
    width: 50px;
    height: auto;
}

/*MEIDA QUERIES*/
@media (max-width: 337px) {
    body {
        font-size: .8em;
    }
.title {
    font-size: 1em;
}

.main-header {
    height: 120px;
}

    nav li {
        display: inline-block;
        clear: left;
}
    h2 {
        font-size: 1em;
    }

    p img {
    display: none;
    }}

@media (min-width: 768px) {

.name {
    font-size: 2em;
    margin: 0;
    padding: 0;
}

.main-header {
    height: 150px;
}

.nav li {
    font-size:  1.5em;
}}

@media (min-width: 936px) {
    .main {
        max-width: 800px;
    }

.title {
    font-size: 2.5em;
    width: 1000px;
    margin: 0 0 0 -20px;

}
}

@media (min-width: 1224px) {

.nav li {
    font-size: 2em;
}
}

Answer 1 · 2015-10-27T16:59:20Z

October 27, 2015 4:59pm

Personally, I usually assign a margin defined in percentage width to the main wrapper to get it centred. So your code would look like:

.main-wrapper {
    min-height: 100px;
    border-bottom: 1px solid grey;
    margin 0 10%;
}

Answer 2 · 2015-10-25T23:33:21Z

October 25, 2015 11:33pm

Hey Devon,

Try to set a maximun width to the main wrapper and then add margin: auto; Maybe let us see the page to figure out a way that you could do it

Answer 3 · 2015-10-25T23:29:17Z

October 25, 2015 11:29pm

Try using text-align:center; on the "main" div that should do the trick

Welcome to the Treehouse Community

Looking to learn something new?

Devon Deason

Devon Deason

Help with my first page

3 Answers

Corin Faife

Corin Faife

Jesus Mendoza

Jesus Mendoza

tomasvukasovic

tomasvukasovic