Unwanted gap at edges of header

HTML & CSS
1

In my website, i am having the problem where there is a gap between the edges of the header <div> and the edge of the page. The margin is set to 0px.

2

Did you reset the margins for the html and body elements too?
Tip: When setting a value of 0 in css, don’t specify units. Eg: html, body { margin: 0; }

3

Can we please see your html and css markup. I’m guessing that your html and/or body have padding, but without seeing the markup it’s a guess.

ninjad

4

sure, here it is (btw i cant upload the file itself because it is saying i am a new user, sorry)

it is in XHTML 1.0 for now, just so you know.

	<body>
	<div id="header">
		<p id="header-image"><img  src="images/logo.png" alt="Logo"></p>
	</div>	
	<div class="allcontent">
		<p>
			Welcome to the Qweb website, where I display all my information such as prices, contact information, and examples of my work.
		</p>
	</div>	
	</body>
</html>

#header-image {
	text-align: center;
}

#header {
	padding: 15px;
	background-image: url(images/header-gradient.png);
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	overflow: hidden;
}

#body  {
	background-image: url("images/Background-image.jpg");
	background-color: white;
}

i removed some of the css that wasn’t related to the header (just the css for the allcontent div.)

5

actually, i tried out what SamA74 said, and it worked. Thanks anyway

6

I tried it and it worked. Thanks

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.