I've recently delved into the world of HTML/CSS and I'm working on creating a simple website. However, I'm encountering some white space-related issues above the header/body and around the sides. Despite trying various adjustments with margins, padding, overflow, and element sizes in the provided HTML and CSS code, I can't seem to resolve the problem. Any assistance or guidance would be highly 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;
}