Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Simon Strömberg
Simon Strömberg
1,423 Points

How do i fix the margin/padding with menus on header?

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Flexbox</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" type="text/css" href="responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <div id="logo"><a href="http://www.disciplin.se">Disciplin</a> <ul class="meny"> <li><a href="index.html"><span class="nuvarande">HEM</span></a></li> <li><a href="#">TOPPLISTA</a></li> <li><a href="#">ANNONSERA</a></li> <li><a href="#">KONTAKT</a></li> <li class="skapablogg"><a href="#">SKAPA EN BLOGG</a></li> <li class="loggain"><a href="#">LOGGA IN</a></li>

</ul>

</div> </header> <div class="hborder2"></div> <div id="main"> <h1>Vill du bli premiumbloggare?</h1> <p>Nedanför kan du läsa om vad vi erbjuer våra premiumbloggare</p> <section id="left"> <ul id="ikon1"> <li> <img src="bilder/1.jpg" alt="bild1" class="bild1"> <h2>Betalt per besökare</h2> <p> Vi betalar dig 1,5 för varje unik besökare du får till din blogg, drar du in många besökare kan vi diskutera om att höja betalninen per unik besökare. </p> </li> <li> <img src="bilder/2.jpg" alt="bild1" class="bild1"> <h2>Syns med på framsidan av Disciplin.se</h2> <p> Som premiumbloggare får du synas med på framsidan av Disciplin.se med din bild för extra exponering av din blogg. </p> </li> </ul> </section> <section id="right"> <ul id="ikon2"> <li> <img src="bilder/1.jpg" alt="bild1" class="bild2"> <h2>Betalt per besökare</h2> <p> Vi betalar dig 1,5 för varje unik besökare du får till din blogg, drar du in många besökare kan vi diskutera om att höja betalninen per unik besökare. </p> </li> <li> <img src="bilder/2.jpg" alt="bild1" class="bild2"> <h2>Syns med på framsidan av Disciplin.se</h2> <p> Som premiumbloggare får du synas med på framsidan av Disciplin.se med din bild för extra exponering av din blogg. </p> </li> </ul> </section> </div> <div class="orange"> <h1>Ansök om att bli premiumbloggare!</h1> <p>För att ansöka krävs det att du har minst 2500 unika besökare i veckan</p>

<div class="knapp"> <h1>ANSÖK!</h1> </div>

</div> <section> <div id="inte-premium"> <h1>Har du inte 10 000 besökare i månaden?</h1> <p>Det gör inget, har du minst 2500 unika besökare i månaden så kan du ändå få några fördelar</p>

  <img src="bilder/1.jpg" alt="bild1" class="bild3">
        <h2>Betalt per besökare</h2>
            <p>
            Vi betalar dig 1,5 för varje unik besökare du får till din blogg, drar du in många besökare kan vi diskutera om att höja betalninen per unik besökare.
        </p>

  <img src="bilder/2.jpg" alt="bild1" class="bild3">
        <h2>Syns med på framsidan av Disciplin.se</h2>
            <p>
            Som premiumbloggare får du synas med på framsidan av Disciplin.se med din bild för extra exponering av din blogg.
        </p>
        </div>

<div class="grey"> <h1>Ansök om att få ditt eget domännamn!</h1> <p>För att ansöka krävs det att du har minst 2500 unika besökare i månaden</p> <h1 class="knapp2">ANSÖK</h1> </div> <footer> <div class="border"></div> <p>© - 2014 <a href="http://www.disciplin.se">Disciplin.se</a> - Skapa en gratis träningsblogg idag hos Disciplin.se | Kontakta oss på <a href="mailto:info@disciplin.se">info@disciplin.se</a></p>

</footer>

</section> </body> </html>

4 Answers

Simon Strömberg
Simon Strömberg
1,423 Points

/********************************** GENERAL ***********************************/

body { font-family: 'sans-serif', open-sans;

}

main {

max-width: 940px; margin: 50px auto; padding: 0;

}

main p {

color: #000; text-shadow: none; text-align: center; line-height: 1.5em; margin: -2px 0; }

a { text-decoration: none; color: #000; }

a:hover { text-decoration: none; color: #ffb533; }

a:active { text-decoration: none; color: #ffb533; }

img { max-width: 100%; border-radius: 100%; margin: 15px 0; }

h1 { margin: 5px 0; text-align: center;

}

h2 { margin: 20px 0; text-align: center;

}

li { list-style: none; }

/********************************** Header ***********************************/

header { border-bottom: 0.1em solid #efe4e4; margin: 0 -999em; padding: 0 999em;

}

.hborder2 { border: 0.15em solid #f5f3f3; margin: -30px -999em; padding: 0 999em;

}

logo {

text-align: center; margin: 0; font-weight: 800; }

p { font-family: sans-serif; margin: 15px 0; font-size: 0.75em; font-weight: normal; line-height: 0.75em; }

/********************************** Menyer ***********************************/

.meny { text-align: center; padding: 10px 0; margin: 0; }

.meny ul { list-style: none; margin: 0 5px; padding: 0; }

.meny li { display: inline-block; }

.meny a { font-weight: normal; padding: 15px 5px; }

.nuvarande { text-decoration: none; color: #ffb533; }

.orange { background: orange; height: 400px; width: 100%; margin: 0 -9999rem; margin-top: 50px; margin-bottom: 50px; padding: 0.25rem 9999rem;
}

.orange h1 { text-align: center; color: #2e2e2e; text-shadow: 1px 1px 0 #ffe57c; margin: 50px 0 0; line-height: 0.75em;

}

.orange p { text-align: center; color: #2e2e2e; text-shadow: 1px 1px 0 #ffe57c; font-size: 1.0em; margin-top: 5px; margin-bottom: 100px; line-height: 1.5em;

}

.orange .knapp { border: 2px dotted #fff; height: 100px; width: 350px; margin: 0 auto; color: #fff;

}

.orange .knapp:hover { background: #ffb533; border: 2px dotted #fff; height: 100px; width: 350px; margin: 0 auto; color: #fff;

}

.knapp h1 { margin: 1.0em; color: #fff; text-shadow: none;

}

inte-premium {

max-width: 940px; margin: 0 auto; padding: 0;

}

inte-premium h1, h2 {

text-align: center; margin: 10px 0; padding: 0;

}

inte-premium p {

text-align: center; margin: 5px 0; padding: 0; line-height: 1.5em;

}

.grey { border: 1px solid #e3e3e3; background: #e3e3e3; width: 100%; height: 200px; margin: 0 -999rem; margin-top: 50px; margin-bottom: 50px; padding: 0 999rem; text-align: center; color: #2e2e2e; text-shadow: 1px 1px 0 #fff; }

.grey h1 { margin: 20px 0; }

.grey p { margin: -25px 0 25px; font-size: 1em; line-height: 1.5em;

}

.grey .knapp2 { border: 2px dotted #fff; margin: 0 auto; padding: 25px 50px; width: 250px; color: #fff; text-shadow: none;

}

.grey .knapp2:hover { background: orange; border: 2px dotted #fff; margin: 0 auto; padding: 25px 50px; width: 250px; color: #fff; text-shadow: none;

}

footer { text-align: center; font-size: 1.25em;

}

footer p { text-align: center; padding: 10px 0; line-height: 1.5em;

}

footer .border { border: 5px solid #e3e3e3; max-width: 940px; margin: 0 auto;

}

Simon Strömberg
Simon Strömberg
1,423 Points

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

/******************************* Bilder *******************************/

header { border-bottom: 0.1em solid #efe4e4; margin: 30px -999em; padding: 4px 999em;

}

img { width: 100%; height: 100%; margin: 0 auto;

}

.grey { height: 260px; width: 100%;

}

.grey .knapp2 { height: 10%; width: 55%; margin: 0 auto;

}

.grey .knapp2:hover { height: 10%; width: 55%; margin: 0 auto;

}

.orange { height: 260px;

}

.orange h1 { margin-top: 10px;

}

.orange p { margin-top: 10px;

}

.orange .knapp { border: 2px dotted #fff; height: 30%; width: 90%; margin: 0 auto; margin-top: -72px; color: #fff;

}

.orange .knapp:hover { background: #ffb533; border: 2px dotted #fff; height: 30%; width: 90%; margin: 0 auto; margin-top: -72px; color: #fff;

}

.knapp h1 { margin: 0.89em; color: #fff; text-shadow: none;

}

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

header { border-bottom: 0.1em solid #efe4e4; margin: 30px -999em; padding: 4px 999em;

}

logo {

float: left;
margin-left: 0.5%;
margin-top: -30px;
padding: 7px 5px;
text-align: left;
width: 90%;

}

.meny { display: inline-block; background: none; float: right; font-size: 0.75em; margin-right: -10%; margin-top: 0 auto; padding: 2px 5px; text-align: right; width: 80%;

}

.skapablogg a { color: #fff; border: 1px solid orange; background: orange; padding: 3px 5px;

}

.loggain a { color: #fff; border: 1px solid orange; background: orange; padding: 3px 5px;

}

.hborder2 { border: 0.15em solid #f5f3f3; margin-top: 500px margin: 0 -999em; padding: 0 999em;

}

}

Simon Strömberg
Simon Strömberg
1,423 Points

I got issues in header in the responsive and I would like to know how to fix it:

Issue: http://puu.sh/eeJa7/0569b9a484.png Issue: http://puu.sh/eeJdZ/4c12e017ac.png

Regards