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

CSS Layout Queries. (Answered)

Hi everyone, I've got some code here that I could use your help with. I'm trying to recreate from scratch the layout exercise from the CSS layouts course. With this one, when I go to expand the viewport to the first media query, my .primary and .secondary columns won't sit together, even though they've had a width of 50% within the wrapper div and have both been floated left.

Would anyone mind lending me a hand with this one?

Cheers

HTML:

<!DOCTYPE html> <html lang="en" dir="ltr">

<head> <meta charset="utf-8"> <title>Dragon Ball Fan Site</title> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet"> </head>

<body>

<header class="main-header clearfix">
  <div class="container">
    <h1 class="title">Dragon Ball Fan Site</h1>
      <ul class="main-nav">
        <li><a href="index.html">Main</a></li>
        <li><a href="index.html">Manga</a></li>
        <li><a href="index.html">Anime</a></li>
        <li><a href="index.html">Video Games</a></li>
        <li><a href="register.html">Register</a></li>
      </ul>
</header>

    <div class="banner">
      <img src="img/main-img.png" alt="Main Image, Goku" class="main-img">
      <h1 class="name">Dragon Ball Fansite</h1>
      <span class="tagline">A Site For Fans, By Fans</span>
    </div>
  </div>

  <div class="wrapper clearfix">
    <div class="secondary col clearfix">
      <h2>Welcome</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel dui at odio imperdiet pulvinar vitae sed arcu. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel dui at odio imperdiet pulvinar vitae sed arcu. Cras accumsan leo nulla, at suscipit augue finibus ac. Aliquam ut mi vulputate, ullamcorper metus quis, tempor lorem. Praesent eleifend dignissim ligula. Nunc enim lectus, fringilla at odio vel, sagittis volutpat velit. Integer pretium ac nisl eget volutpat.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>

    <div class="primary col clearfix">
      <h2>About Dragon Ball</h2>
      <img src="img/cast.png" alt="Main Cast" class="cast">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel dui at odio imperdiet pulvinar vitae sed arcu. Cras accumsan leo nulla, at suscipit augue finibus ac. Aliquam ut mi vulputate, ullamcorper metus quis, tempor lorem.</p>
    </div>

      <div class="tertiary col">
        <h2>About Us</h2>
        <ul>
          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
          <li>Ut vel dui at odio imperdiet pulvinar vitae sed arcu. Cras accumsan leo nulla, at suscipit augue finibus ac.</li>
          <li>Aliquam ut mi vulputate, ullamcorper metus quis, tempor lorem.</li>
        </ul>
      </div>
    </div>

    <footer class="main-footer">
      <span class="copyright"> &copy;Dragon Ball Fan Site 2018</span>
    </footer>

</body> </html>

CSS:

/* ========= Fonts ========= */

@font-face { font-family: 'Roboto', sans-serif; }

@@font-face { font-family: 'saiyain-sans'; src: url(font/Saiyan-Sans.ttf); } /* ========= Elements ========= */

  • { margin: 0; padding: 0; }

body { font-family: 'Roboto', helvetica, sans-serif; font-size: 1.25em; }

h1 { margin: 0; font-weight: 400; font-size: 2.441em;

}

h2 { font-size: 1.953em; padding-bottom: 1em; }

p { line-height: 1em; }

/* ========= Classes ========= */

.main-header { text-align: center; color: #f85b1a; margin-bottom: 1em; padding-top: 2em; }

.title { padding-bottom: 1em; }

.main-nav li { padding-bottom: 0.5em; font-weight: 400; }

.main-nav a { text-decoration: none; color: #f85b1a; display: block; }

.banner { text-align: center; background-color: #f85b1a; color: #fff; padding: 1em; margin-bottom: 2em; }

.main-img { border-radius: 50%; border: 3px solid #000; margin-bottom: 2em; }

.name { font-family: 'saiyain-sans', 'Roboto', sans-serif; margin-bottom: 0; }

.wrapper { margin: 0 auto; width: 90%; }

.col { margin: 10px; border: 1px solid red; }

.primary, .secondary { margin-bottom: 1em; }

.cast { width: 100%; }

.main-footer { background-color: #072083; text-align: center; padding: 1em; margin-top: 1em; }

.copyright { font-size: 0.8em; color: #8a9294; }

/* ========= media queries ========= */

@media (min-width: 779px) {

.container { margin: 0 auto; }

.main-header { padding: 1em; }

.title, .col { float: left; }

.title { padding-top: 0; padding-bottom: 0; font-size: 1.25em; }

.main-nav { float: right; }

.main-nav li { display: inline-block; float: left; list-style: none; font-size: 1.25em; padding: 0 0.2em; border-right: 1px solid #8a9294; }

.main-nav li:last-child { border-right: none; }

.name { padding-bottom: 0.5em; }

.tagline { font-size: 1.5em; }

.wrapper { width: 80%; }

.primary, .secondary { width: 50%; }

.copyright { padding: 2em; } /* ========= Clearfix ========= */

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

3 Answers

Thanks guys, in the end it was the border-box property which I added to the universal selector and therefore solved the problem. Appreciate your help, it put me on the right track to figure out what was going wrong.

Dennis Amiel Domingo
Dennis Amiel Domingo
15,767 Points

Change your .wrapper div's width to 100% and your .primary and .secondary divs to 48%. That will look better. I think the problem is you're assigning width values to your primary and secondary divs that are wider than your wrapper div.

First of all I see you missed a closing tag of .container div in header. Second, the margins you add takes place, what means you have 50% width + 20px of margin(left & right). So it's wider then the wrapper.