0

I'm very new to HTML/CSS and trying to create a basic website. There is white space above the header/body and also around the sides. I've tried adjusting margins/padding/overflow/size of elements. I've posted the HTML and CSS. Any help would be greatly appreciated.

   <body>
     <header>
       <h4>Pleasant View</h4>
       <h1>Pet Competition</h1>
     </header>
   </body>




/*HTML Styles*/

html {
    background: url(images/pets.png) top right  / 30% repeat content-box;
}

/*Body Styles*/
body {
    background: white;
    margin-left: auto;
    margin-right: auto;
    border-left: 4px solid black;
    border-right: 4px solid black;
    min-width: 320px;
    max-width: 1000px; 
    min-height: 100%; 
    width: 100%;
}

/*Header Styles*/

header {
    background-color: white;
    background: url(images/grass.png) bottom left / 30% repeat-x content-box, 
    url(images/blue_gingham.jpg) top left / 30% repeat content-box; 
    height: 200px;
    width: 100%;
}

header > h4 {
    font-family:'Parisienne';
    font-size: 2.5em;
    font-weight: lighter;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 0;
    margin-bottom: 0;
    margin-top: 0;
}

header > h1 {
    font-family:'Raleway', sans-serif;
    font-size: 4em;
    text-align: center;
    padding-top: 0;
    margin-top: 0px;
}
Danielle Marshall
  • 3
  • 5

1 Answers1

1

Apply the following style to html and body:

html, body {
    margin: 0;
    padding: 0;
}

By default, they have some spacing, and you have to remove it.

AntoineB
  • 4,535
  • 5
  • 28
  • 61