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
Alex Goodge
Front End Web Development Techdegree Student 981 PointsEverything is working except my image captions are still appearing with a white border?
The headers, nav links, images and footer are aligning to the centre but the captions for my images are still appearing with a white border around them. Any thoughts?
workspace - https://teamtreehouse.com/workspaces/22725442
```. HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Alex Goodge</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Alex Goodge</h1>
<h2>On Australia</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class='selected'>Gallery</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id ="wrapper">
<section>
<ul id="gallery">
<li>
<a href="BikeRide.jpg"></a>
<img src="Bike Ride.jpg" alt="">
<p><em>Bike Ride In Melbourne</em></p>
</li>
<li>
<a href="img/GreatBarrierReef.jpg"></a>
<img src="Great Barrier Reef.jpg" alt="">
<p><em>Great Barrier Reef Cairns</em></p>
</li>
<li>
<a href="RoadTrip.jpg"></a>
<img src="Road Trip.jpg"align="top"alt="">
<p><em>Road Trip Along The Great Ocean Road</em></p>
</li>
<li>
<a href="goldcoast.jpg"></a>
<img src="goldcoast.jpg" alt="">
<p><em>The Gold Coast</em></p>
</li>
<li>
<a href="TheTwelveApostles.jpg"></a>
<img src="The Twelve Apostles.jpg" alt="">
<p><em>The Twelve Apostels</em></p>
</li>
<li>
<a href="brisbanesouthbank.jpg"></a>
<img src="brisbanesouthbank.jpg" alt="">
<p><em>Brisbane Southbank</em></p>
</li>
</ul>
</section>
<footer>
<a href="http://facebook.com/alex.goodge"><img src="facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>Ā© Alex Goodge. 2016</p>
</footer>
</div>
</body>
</html>
```. CSS
/************************* GENERAL *************************/
body { font-family: 'Open Sans', sans-serif; }
a { text-decoration: none; }
wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
color: #000,
background-color:
}
/************************* HEADING *************************/
header { float: left; margin: 0 0 20px 0; padding: 5px 0 0 0; width: 100%; }
logo {
text-align: center; margin: }
a { color: #6ab47b; border-color: #d3d3d3 }
img { max-width: 100% }
/Green background Header/ header { background: #6ab47b; border color: #599a68; }
/Green background footer/ header { background: #6ab47b; border color: #599a68; }
h1 { font-family: 'Changa One', sans-serif; text-align: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }
h2 {
font-family: 'sans-serif';
margin: -5px 0 0;
font-size: 0.85em;
font-weight: normal;
}
/************************* NAVIGATION *************************/
nav { text-align: center; padding: 10px; margin: 20px 0 0; }
nav ul { list-style: none; margin: 0 auto; }
nav li { display: inline-block; align-content: left 50px; margin: 0; }
nav a { font-weight: 800; padding: 15px 10px; }
/Navigation list font-color/ h1, h2 { color: #fff; }
/************************* FOOTER *************************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #000; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
/************************* PAGE: GALLERY *************************/
img { max-width: 125; }
gallery {
margin: 0;
padding: 0;
list-style: none;
}
gallery ul {
display: block; }
gallery li {
float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #000; }
gallery li a p {
margin: 0; padding: 5%; font-size: 0.75em; color: #000; background-color: }
/************************* COLOURS *************************/
/Navigation list background color/ nav { background: #599a68; }
/Visited navigation Link is green/ nav a, nav a:visited { color: #fff; } /Selected navigation Link - Hovering over a navigation link is green/ nav a.selected, nav a:hover { color: #32673f; }
/Sight Body/ body { margin: 0; padding: 0; width: 100%; background-color: #d3d3d3; color: #000; }
1 Answer
Samuel Ferree
31,722 PointsIn the heading section of your css, you have a rule that targets all anchor elements and gives it a border-color of #d3d3d3
could that be it?