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
Kyle Rado
1,382 PointsWhy is there no margin for the text of my About page despite the CSS declarations for my wrapper div?
When I view my About page, the paragraph text and h3 element appear to be right up against the left side of my browser, unlike Nick's example in the video in which there is a margin. I have been following closely so I don't understand what I am missing. Thanks for any help!
Kyle Rado
1,382 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kyle Rado | Playa</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Play:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Kyle Rado</h1>
<h2>Playa</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<img src="img/nick.jpg" alt="photograph of Nick Pettit" class="profile-photo">
<h3>About</h3>
<p>Hi, I'm Kyle Rado! This is where I reign as master first class of the world because I can make basic webpages with html and CSS suhhhhhh.</p>
<p> If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/kyle_rado">@kyle_rado</a>.</p>
</section>
<footer>
<a href="http://twitter.com/kyle_rado"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/kyle.v.rado"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2016 Kyle Rado.</p>
</footer>
</div>
</body>
</html>
/*********************
GENERAL
*********************/
html {
padding: 0;
margin: 0;
}
body {
font-family: 'Abel', sans-serif;
}
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 0;
}
img {
max-width: 100%;
}
h3 {
margin: 0 0 1em 0;
}
/*********************
HEADING
*********************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Play', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-family: 'Play', sans-serif;
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
/*********************
NAVIGATION
*********************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/*********************
FOOTER
*********************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/*********************
PAGE PORTFOLIO
*********************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #000;
color: #bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size: .75em;
color: #bdc3c7;
}
/*********************
PAGE ABOUT
*********************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/*********************
COLORS
*********************/
/* site body */
body {
background: #fff;
color: #999;
}
/* green header */
header {
background: #6ab47b;
border-color: #599a68;
}
/* links */
a {
color: #6ab47b
}
/* logo text */
h1, h2 {
color: #fff;
}
/* nav background on mobile */
nav {
background: #599a68;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32672f;
}
2 Answers
edeharrison
Full Stack JavaScript Techdegree Student 11,127 PointsHi Kyle,
You don't have any left and right margins for your h3 (the second 0 in the list represents right margin, the fourth 0 represents left margin:
h3 {
margin: 0 0 1em 0;
}
In your wrapper div, you have your left and right margins set to auto, and a max-width of 940px. The auto means that the div will be pushed into the horizontal centre of the browser, effectively creating equal space around the left and right sides.
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 0;
}
However, if your browser width is 940px or less, there won't appear to be any left/right margins as a number value hasn't been set. Could this be this issue?
All the best,
Ede
Kyle Rado
1,382 PointsHi Ede,
Thanks so much for your prompt and comprehensive response. I guess I did not quite understand how the max-width property works in relationship to the size of the browser window, so thank you for clearing that up. The lack of margin makes sense now when the window is under 940px, so I suppose Nick's window in the lesson must have been wider than that. Thank you again!
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Pointsedeharrison
Full Stack JavaScript Techdegree Student 11,127 PointsHi Kyle,
Could you post your code for this?
Cheers,
Ede