CODEWITHSUNDEEP
htmlcss
Laura
Laura

Reputation: 51

How do I make the bar at the top of the page go away in html

I am sure other people have had this problem, so maybe one of you has found the solution! I am designing a website, and I am trying to keep a border along the sides. My margins do that, but now there is a border across the top. I can't make it go away, and I don't know why. Does anyone have an idea why that bar of color across the top of the screen won't go away? Also, if you have suggestions for making my code more concise, feel free to let me know. Thanks for the help!!

@charset "utf-8";
/* CSS Document */

html {
    background-color:#0FBDC8;
    /*sets the backround html color to teal, this should create vertical teal borders along the side of the document*/

    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
    /*sets the font*/
}
body {
    background-color: #F8F8F8;
    /*sets the body background color, helps create the vertical teal borders along the side of the document*/

    margin: 0 auto;
    max-width:900px;
}

div.aside {
    margin: 2% 5%;
}

div.interesting {
    border: 5px solid #11CBD7;
    padding: 5% 2%;
}

h2 {

    text-align: left;
    font-weight:bold;
    font-style:italic;
    margin: 0% 5%;
}

h3{
    text-align: left;
    font-weight:bold;
    font-style:italic;
    margin: 0% 10% 0% 10%;
}

h5 {
    text-align: left;
    font-weight:bold;
    font-style:italic;
    margin: 0% 10%;
}

h1 {
    text-align: center;
    font-weight:bold;
    font-style:italic;
    margin: 8% 0% 10%;

}
p {
    line-height: 1.5em;
    margin:2.5% 10%;
    text-align: justify;
}

li {
    margin: 0 20%;
}

Upvotes: 1

Views: 70

Answers (2)

lrossy
lrossy

Reputation: 533

Without being able to see the HTML, this is just a guess. 

div.interesting {
    border: 5px solid #11CBD7;
    padding: 5% 2%;
}

Since this is the only place you defined your border, try changing to:

div.interesting {
    border: 5px 0px 5px 5px solid #11CBD7;
    padding: 5% 2%;
}

Keep in mind, it may be that you need to reset styles, then apply your stylesheet

Good luck!

Upvotes: 0

Johannes
Johannes

Reputation: 67799

Add this to avoid the default margins which are added by browsers automatically:

html, body {
  margin: 0;
}

Upvotes: 1

Related Questions