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 trialIskander Ismagilov
13,298 PointsTop line doesn't go away
iI got rid of the top line by inserting this to CSS:
ul {margin: 0;} /* without it the line on the top doesn't go away*/
But I still want to find out why the line goes away with adding this chunk of code and doesn't go without it?
And I tried to figure out what element keeps the line, using dev tools property inspector, and when I was hovering over the line it shows html.... like whole page...
Here is my css:
/*************************
GENERAL
*************************/
body {font-family: 'Overlock', cursive;}
#wrapper {max-width: 940px;
margin: 0 auto;
padding: 0 5%;}
a {text-decoration: none;}
img {max-width: 100%;}
/*************************
HEADING
*************************/
header {float: left;
padding: 5px 0 0 0;
width: 100%;}
#logo {text-align: center;
margin 0;}
h1 {font-family: 'Graduate', cursive;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;}
h2 {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;}
/*************************
FOOTER
*************************/
footer {text-align: center;
font-size: 0.75em;
clear: both;
padding-top: 50px;
color: #ccc;}
/*************************
PAGE: PORTFOLIO
*************************/
#gallery{margin 0;
padding 0;
list-style: none;}
#gallery li {float: left;
width: 45%;
margin: 2.5% ;
background-color: #f5f5f5;
color: #bdc3c7;}
#gallery li a p {margin: 0;
padding: 5%;
font-size: 0.75;
color: #bdc3c7;}
ul {margin: 0;} /* without this the line on the top doesn't go away*/
/*************************
COLORS
*************************/
/* site body */
body {background-color: #fff;
color: #999;}
/* green header */
header {background: #7ab47a;
border-color: #ff9a68;}
/* nav background on mobile */
nav {background: #69a369;}
/* logo text */
h1, h2 {color: #fff;}
/* links */
a {color: #b4048b;}
/* nav links */
nav a, nav a:visited {color: #fff;}
/* selected nav link */
nav a.selected, nav a:hover {color: #32673f;}
2 Answers
Jacob Brech
7,224 PointsYou can always set the top margin to -10px. I did this to remove the white space at the top:)
mrhummel
Courses Plus Student 1,765 PointsI have no idea how your webpage looks without the HTML code. But my guess is, that the margin top of the ul
element caused the "line". Elements are already styled and you would have to use a CSS reset stylesheet to get rid of every margin , padding etc.
I think you reset the margin of the ul
element with your ul {margin: 0;}
line.
Common standard style for ul elements:
ul {
display: block;
list-style-type: disc;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
padding-start: 40px; }
Rafael SM
832 PointsRafael SM
832 PointsThat was my solution too. =/