Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Yasin Atagün
Yasin Atagün
4,691 Points

Header Margin and Padding Values for Logo and Menu

My question is, while menus margin fixed 10px to 10px bottom top, menus margin not doing same. So its not being centered on horizontal way as menu items.

    <header class="main-header">
        <div class="container clearfix">
                <h1 class="logo">WEBTEACH</h1>
            <ul class="main-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">About Me</a></li>
                <li><a href="#">Contact</a></li>

            </ul>
        </div>
    </header>

* {
    box-sizing: border-box;
}

body {
    margin:0;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.9;
    font-size: 16px;

}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Raleway', sans-serif;
}

p {
    font-size: 1em;
}

h1 {
    font-size: 1.875em;
}

h2 {
    font-size: 1.5625em;
}

h3 {
    font-size: 1.25em;
}

h4 {
    font-size: 1.1em;
}

a {
    text-decoration: none;
}




/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */
.logo {

    font-family: 'Titan One', cursive;
    padding-left: 30px;
    padding-right: 30px;
    color: #D81E5B;
}

.main-nav a {
    color:#0D0630;
}

.logo ,
.main-nav li {
    text-align: center;
    background:#fff;
    margin-top:10px;
    margin-bottom: 10px;    
    list-style: none;
}



.logo a,
.main-nav a {
    padding: 10px 15px;
    text-align: center;
    display: block;

}

.main-nav a {
    font-size: .95em;
    text-transform: uppercase;
    font-weight: bold;

}

.main-nav a:hover {
    background-color: #D81E5B   ;
}
/* ---- Blog ---- */

.blog-1, .blog-2 {
    border-bottom: 3px solid lightgrey;
    padding-bottom: 30px;
    margin-bottom: 50px;
}
.blog-1 a,
.blog-2 a {
    font-family: 'Raleway', sans-serif;
    color: black;
    border-bottom: 3px solid grey;
}




/* ---- Layout Containers ---- */

.container {
    padding-left: 1em;
    padding-right: 1em;
}

.main-header {
    background-color: #0D0630;
    padding-top: .5em;
    padding-bottom: .5em;
    margin-bottom: 30px;
}

.main-footer {
    text-align: center;
    padding: 2em 0;
    background: #18314F;
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 789px) {

    .wrap {
        min-height: calc(100vh - 89px);
    }

    .container {
        width: 85%;
        max-width: 1150px;
        margin: 0 auto;
    }

    .main-nav {
        float: right;
    }

    .main-nav  li {
        float: left;
        margin-left: 12px;
    }

    .logo {
        float: left;
    }

    .blog-img {
        width: 300px;
        float: left;
        margin-top: 5px;
        margin-right: 25px;
        margin-bottom: 25px;
        padding: 10px;
        border: solid 1px #d9e4ea;
    }

    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }

}

2 Answers

Yasin Atagün
Yasin Atagün
4,691 Points

BERYL so you mean, with float and setting margin i cant get the result that i want? I mean im learning css and didnt come to flex topic yet. Practicing what im learned.

BERYL YOUNG
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
BERYL YOUNG
UX Design Techdegree Graduate 39,697 Points
BERYL YOUNG
.a{fill-rule:evenodd;}techdegree seal-36
BERYL YOUNG
UX Design Techdegree Graduate 39,697 Points

This might be off base but I presume you have linked your CSS to your html ? Your snippet doesn't show the link. Floats will work for your navigation.