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 Basics Positioning Page Content Create an Image Caption with Absolute Positioning

Something went wrong, nothing has changed, plus the site looks big, what gives?

/* ================================= Base Element Styles ==================================== */

  • { box-sizing: border-box; }

body { font-family: 'Varela Round', sans-serif; line-height: 1.6; color: #3a3a3a; }

p { font-size: .95em; margin-bottom: 1.8em; }

h2, h3, a { color: #093a58; }

h2, h3, h4 { margin-top: 0; }

h4 { margin-bottom: .4em; }

a { text-decoration: none; }

img { max-width: 100%; }

figure { margin: 0; line-height: 0; position: relative; } figcaption { font-size: .9em; line-height: 1.5; color: #fff; padding: 1em;
background: rgba(19,43,102, .85);

position: absolute; bottom: 0; width: 100%;

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

/* ---- Navigation ---- */

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

.main-nav { margin-top: 5px; }

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

.main-nav a {
    font-size: .95em;
    color: #3acec2;
    text-transform: uppercase;
}

.main-nav a:hover {
    color: #093a58;
}

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

.main-header { padding-top: .5em; padding-bottom: .5em; }

.banner, .main-footer { text-align: center; }

.icon-location {
  width: 35px;
}

.banner { color: #fff; background: #3acec2; padding: 3.2em 0; margin-bottom: 60px; }

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

.main-footer { background: #d9e4ea; padding: 2em 0; margin-top: 30px; }

/* ---- Page Elements ---- */

.logo { width: 190px; }

.headline { margin-bottom: 0; }

.icon { width: 35px; position: absolute; top: -50px; left: -50px; }

 /* ================================= 

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

@media (min-width: 769px) {

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

.name,
.col {
    float: left;
}

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

.main-nav {
    float: right;
}

.main-nav li {
    display: inline-block;
    margin-left: 15px;
}

.tagline {
    font-size: 1.4em;
}

/* ---- Float clearfix ---- */

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

}

@media (min-width: 1025px) {

.container {
    width: 80%;
    max-width: 1150px;
}

.primary {
    width: 40%;
}

.secondary,
.tertiary {
    width: 30%;
}

}

1 Answer

Hi Arcel, I ran your CSS through the W3C validator and it came up with a few issues, mainly that there was no closing bracket on the figcaption rule. Not sure if that will take care of it, but hopefully so! Also, I can't tell, but make sure the very first rule, the box-sizing: border-box, has an asterisk, implying the universal selector. Happy coding!