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

HTML How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

Iskander Ismagilov
Iskander Ismagilov
13,298 Points
Posted by Iskander Ismagilov
Iskander Ismagilov
13,298 Points

Top 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
Jacob Brech
7,224 Points
Jacob Brech
Jacob Brech
7,224 Points

You can always set the top margin to -10px. I did this to remove the white space at the top:)

Rafael SM
Rafael SM
832 Points

That was my solution too. =/

mrhummel
PLUS
mrhummel
Courses Plus Student 1,765 Points
mrhummel
mrhummel
Courses Plus Student 1,765 Points

I 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; }