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 trialALEKSANDAR TODOROVSKI
Courses Plus Student 8,508 Pointsclearfix and columns does not work on screen for 1025px , can someone help me please i did step by step from Guill
/*
If you get stuck, feel free to watch the follow-up videos where I'll show you one solution
*/
/* =================================
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 {
margin-top: 0;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
/* =================================
Base Layout Styles
==================================== */
/* ---- Navigation ---- */
.name {
font-size: 1.25em;
margin: 0;
}
.main-nav {
margin-top: 5px;
}
.name a,
.main-nav a {
text-align: center;
display: block;
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;
}
.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;
}
/* =================================
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,
.main-nav li{
display: inline-block;
margin-left: 15px;
}
.tagline {
font-size: 1.4em;
}
.wrap {
min-height: 100vh;
}
/* ---- 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
Liam Clarke
19,938 PointsHello
Your have have the correct CSS, please make sure that you are adding the class clear-fix
to the HTML .container
Enjoy!