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
Trang Ho
3,518 PointsWhy isn't my green header isn't going all the way across the screen? It's about 3-inches wide in the left corner.
<body>
<header>
<a href="index.html" id="logo">
<h1>Trang Ho</h1>
<h2>Financial Media Consultant</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
/*******************
HEADING
********************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
widows: 100%;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Changa One', sans-serif;
margin: 15 px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
5 Answers
Christian Andersson
8,712 PointsHey Trang,
you have an error in your header-styling in the css. You don't want "widows" here, what you probably meant is "width". :-)Change that and it will span across your screen.
If it still leaves white areas around it, try applying a zero margin to your body tag:
body {
margin: 0;
}
Ben Singer
8,621 PointsJust to add to above, there is actually a "widows" CSS parameter, though it only affects printed styles.
Christian Andersson
8,712 PointsOh, right you are! Edited answer. Thanks.
Trang Ho
3,518 PointsThank you. That fixed it the green header.
Why isn't my photo on the about.html not small and round?
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
Christian Andersson
8,712 PointsCould you please post your html from your about page?
Trang Ho
3,518 PointsI don't know what to do. Not all of the HTML code appears even if I put ````````` in front of it of the lines that don't show up.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trang Ho | Media Consultant</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Trang Ho</h1>
<h2>Financial Media Consultant</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 perpetual learner.</p>
<p>If you' like to follow me on Twitter, my username is <a href"http://twitter.com/kytrangho">@KyTrangHo</a>.</p>
</section>
<footer>
<a href="http://twitter.com/kytrangho">
<img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"> </a>
<a href="http://facebook.com/kytrang.ho">
<img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"></a>
<p>© 2015 Trang Ho.</p>
</footer>
</div>
</body>
</html>
Christian Andersson
8,712 PointsTrang, I don't see the .profile-photo class in the html you posted. I have the css for it, but I cannot see it in your html.
Where is your profile-photo?
Trang Ho
3,518 PointsThat's the frustrating thing about this platform. Some of the lines pasted from an HTML document don't appear even if you put ```` in front of them.
Christian Andersson
8,712 PointsI edited your post. I can see the class now. For future reference, to show the code here on Treehouse forums you need to put exactly 3 dashes ``` before your first line of code, followed by the language, and then another 3 after your last line of code. For example (without the spaces):
` ` `html
line 1
line 2
....
line x
` ` `
Onto your problem. I can see the profile picture but it seems oval, rather than perfectly circular. If this is what you want to do, then you have to make sure that you either use a square photo (which is as wide as it is tall), or resize it with css by specifying the same width and height. In your css I see you have specified a width of 150px, but if you do not specify a height, it will keep the height proportional to the width as in the original size (if the picture is twice as wide as it is tall, giving it a width of 150px would mean that it would get a height of 75px). So here is how you can solve this:
.profile-photo {
display: block;
width: 150px;
height: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
Also, you probably want to use width here, and not max-width.
Hope this helps.
Trang Ho
3,518 Pointsthank you!
Trang Ho
3,518 PointsTrang Ho
3,518 PointsThe profile photo I added isn't reduced and round even though I have the css for that as:
/++++++++++++++++++ PAGE: ABOUT *******************/
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }