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 trialMaya Liberman
Full Stack JavaScript Techdegree Graduate 26,360 PointsWhay my nav is not centered?
/* =================================
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;
float: left;
padding-top: 10px;
margin-left: 25px;
}
.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;
}
.col {
padding-right: 1em;
padding-left: 1em;
}
.banner {
color: #fff;
background: #3acec2;
padding: 3.2em 0;
margin-bottom: 60px;
}
.main-footer {
background: #d9e4ea;
padding: 2em 0;
display: block;
margin-top: 30px;
}
/* ---- Page Elements ---- */
.logo {
width: 190px;
display: block;
margin: auto;
padding-top: 40px;
}
.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 li {
display: inline-block;
margin-left: 15px;
}
.tagline {
font-size: 1.4em;
}
.col {
display: block;
width: 100%;
}
.feat-img {
width: 300px;
float: left;
margin-top: 5px;
margin-right: 25px;
margin-bottom: 25px;
padding: 10px;
border: solid 1px #d9e4ea;
}
.main-footer {
display: block;
margin: auto;
width: 100%;
border: 1px;
}
/* ---- 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
Bogdan Cabaj
16,349 PointsHi Maya,
CSS looks good but it looks like you have pasted it twice instead of pasting HTML. You have much more code in css compared to what they have in the video as well. Please attach your HTML as we can take a look.
Maya Liberman
Full Stack JavaScript Techdegree Graduate 26,360 PointsMaya Liberman
Full Stack JavaScript Techdegree Graduate 26,360 Points