Positioning Problem

Please help!

I’m sort of a beginner in HTML and CSS… I’ve made a couple of websites by now, but only by following YouTube tutorials and learning on Codecademy. But now I want to create a website from scratch, just to teach myself the basics and speed up my coding…

I’m trying to create a Bootstrap-styled website (something like Airbnb), but without the Bootstrap because I want to learn raw HTML and CSS first. And right at the beginning, I hit a brick wall.

When trying to make the header (the menu, like the one at Airbnb), i always end up with some extra space around my div :sick:
I really don’t know what’s wrong, I’m trying to make it 100% wide and about 65px high, but it always stays 5-10px away from the edges of the browser. I only manage to fix it with a negative value of the margin, but I feel it’s wrong since I can’t precisely determine how much px is the div away from the edges. Here’s my code and the result, please help! I don’t know what to do anymore!

The HTML is super-simple, so I can’t figure out what’s wrong. Is there an option in CSS I’m missing?

Result:


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
  <body>
    <div class="nav">
      <div class="container">

      </div>
    </div>
</html>


.nav  {
	height: 65px;
	width: 100%;;
	background-color: red;
}

.nav .container {
	color: black;
	width: 100%;
	display: inline;
}

Thank you!

Hi Snoopy747. Welcome to the forums. :slight_smile:

Hehe, the traps of learning web design. Browsers set some default styles, which you need to override if you don’t like them. These styles include making headings rather large and bold, for example. They also include a bit of padding or margin around the body element—which is quat you are seeing here. for this reason, many people start their style sheet with a “reset”, something like this:

html, body, div, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}

In your case, the actual issue is solved by this bit:

body {margin: 0; padding: 0;}

Wow, I can’t believe I didn’t know that! Thank you so much for your help! Everything is fine now. :slight_smile:

Are there any other setups I should make before creating a website which I don’t know of, similar to this one?

Thanks

Hah, that’s a hard one to answer. There are endless pitfalls, but that’s partly why I recommend starting this stuff with a good book, which takes you through the discipline step by step, introducing you to the most important things to know in a systematic way.