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
Ekene Ezeoba
2,614 Pointsmy code works a bit different from the video
my code displays something similar to the video but not exactly the same thing and I have tried to display it on google chrome and I still get the same result and I have also checked the codes and they are the same. for example when I typed in this code .name, .main-nav li { display: inline-block; } in my media query the .main-nav floats beside the .name while in the video the .main-nav is underneath the .name
8 Answers
eck
43,038 PointsI can see that you have added:
.main-header {
text-align: center;
}
This is different from the video.
eck
43,038 PointsSeems that in the video they are setting the display for .name, main-nav li to inline but you are setting it to inline-block.
Ekene Ezeoba
2,614 PointsI even tried the inline display value and it still didn't match up with the video and am beginning to think i might be from the browser.
eck
43,038 PointsThat could be.
Can you share all the HTML and CSS you have written for this here? There might be something peripheral to that selector causing the issue.
Ekene Ezeoba
2,614 Points/* =================================
Base 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.5em;
}
h2,
h3,
a {
color: #093a58;
}
h2,
h3 {
margin-top: 0;
}
a {
text-decoration: none;
}
/* =================================
Base Layout Styles
==================================== */
/* ---- Navigation ---- */
.name {
font-size: 1.25em;
/* float: left;*/
}
.name,
.main-nav li {
text-align: center;
background: #fff;
margin-top: 6px;
margin-bottom: 6px;
}
.main-nav a {
font-size: .95em;
color: #3acec2;
text-transform: uppercase;
}
.main-nav a:hover {
color: #093a58;
}
/* ---- Layout Containers ---- */
.container {
padding-left: 1em;
padding-right: 1em;
}
.main-header {
text-align: center;
padding-top: 1.5em;
padding-bottom: 1.5em;
background: #3acec2;
margin-bottom: 30px;
}
.main-footer {
text-align: center;
padding: 2em 0;
background: #d9e4ea;
}
/* =================================
Media Queries
==================================== */
@media (min-width: 769px) {
.wrap {
min-height: calc(100vh - 89px);
}
.container {
width: 80%;
max-width: 1150px;
margin: 0 auto;
}
.name,
.main-nav li {
display: inline;
}
.name {
width: 240px;
margin: 50px 0;
}
}
Ekene Ezeoba
2,614 Points<!DOCTYPE html>
<html>
<head>
<title>Best City Guide</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrap">
<header class="main-header">
<div class="container">
<h1 class="name"><a href="#">Best City Guide</a></h1>
<ul class="main-nav">
<li><a href="#">ice cream</a></li>
<li><a href="#">donuts</a></li>
<li><a href="#">tea</a></li>
<li><a href="#">coffee</a></li>
</ul>
</div>
</header>
<div class="container">
<div class="primary col">
<h2>Welcome!</h2>
<p>Everything in this city is worth waiting in line for.</p>
<p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
<p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
</div><!--/.primary-->
<div class="secondary col">
<h2>Great food</h2>
<p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee dragée chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
<p> Fruitcake jelly-o croissant soufflé. Biscuit jujubes dragée. Sesame snaps tootsie roll chocolate bar cake tart macaroon pudding. Ice cream gummies jujubes cupcake. Cake marshmallow cookie lollipop tart.</p>
</div><!--/.secondary-->
</div><!--/.container-->
</div><!--/.wrap-->
<footer class="main-footer">
<span>©2015 Residents of The Best City Ever.</span>
</footer>
</body>
</html>
eck
43,038 PointsWhat are all the ways you version is different from the video that you are having trouble figuring out?
Ekene Ezeoba
2,614 PointsNow i see..Thanks
Ekene Ezeoba
2,614 PointsThat was just the main difference, every other thing works just fine.
eck
43,038 Pointseck
43,038 PointsCan you provide a link to the video you are working on? :D