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 ramseydennis
ramseydennis
4,530 Points

I believe I have Nick's exact code, but unlike his screen, my contact icons are laying on top of "general information."

I believe I have Nick's exact code for separating my "General Information" section, and my "Contact Details" section into columns; however, the icons (phone picture, email picture, and twitter picture) are laying over top the words in my "General Information" column, causing it to look sloppy. The padding and margins also look too close, especially compared to Nick's preview.

Is there anything I'm not seeing?

Here's the link to the full code: https://w.trhou.se/tftdlxwar2

Here is what I'm referencing specifically: 

<section id="primary">
      <h3>General Information</h3>
      <p>I am always open to help you create a new and unique design you love for your company, organization, or you.</p>
      <p>Please only use phone contact for urgent inquiries. Otherwise, Twitter and email are the best way to reach me.</p>
    </section>
    <section id="secondary">
      <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:444-5643">444-5643</a></li>
          <li class="mail"><a href="mailto:ramsey@example.com">ram@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=metrocollab">@metrocollab</a></li>
         </ul>
    </section>

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

  /************************
      TWO COLUMN LAYOUT
*************************/

  #primary {
    width: 50%;
    float: left; 
  }

  #secondary {
    width: 40%
    float: right;
    }
  }

}

Thanks -

1 Answer

Nicholas Olsen
seal-mask
.a{fill-rule:evenodd;}techdegree
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 Points
Nicholas Olsen
.a{fill-rule:evenodd;}techdegree
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 Points

You're missing a semicolon on the 'width' property in #secondary. This is causing the browser to interpret that line as:

#secondary {
    width: 40% float: right;
}

It can't make sense of that, so it discards it as if you never wrote either property.

Try adding the semicolon and see if that fixes it.

ramseydennis
ramseydennis
4,530 Points

Ah I can't believe I missed that -

Thank you, it did work.