Nav bar is not lining up properly - html

Question

So i'm working on a nav bar which should be aligned horizontally, but it won't. If i try to use
display: inline-block;
and then
float: left;
the navbar collides with the rest of my divisions
Here's my code:
http://jsfiddle.net/0p287vmb/

Answer 1

Try this:
nav
a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 0px;
}
nav
a:hover {
background-color: white;
display: inline-block;
}
I removed the commas because with commas it translates to nav & a. In your case removing it solves the problem also it overwrote the width of the nav that's why it doesn't seem to take up the whole width.

Answer 2

That's because you are overriding the width of the navbar in
nav,
a {
...
width: 200px;
...
}
and the display block here:
nav,
a:hover {
background-color: white;
display: inline-block;
}
Just move the navbar styling after nav,a:hover ..., and remove nav from the same place because you are also ovveriding the background color of the nav.
Also, on the last line it should be font-weight not text-weight.
* {
font-family: Verdana;
font-size: 14px;
margin: 0;
}
p {
padding 20px;
}
#wrapper {
width: 900px;
background-color: #ff3333;
margin: auto;
}
header {
background-color: #00c9fd;
width: 900px;
}
nav,
a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 0px;
float: left;
}
a:hover {
background-color: white;
display: inline-block;
}
nav {
background-color: #cccccc;
width: 900px;
}
#bigimage {
width: 900px;
}
#bigimage,
p {
color: #00c9fd;
background-color: #ffffff;
font-size: 12px;
}
main {
width: 900px;
}
article {
background-color: #cccccc;
width: 900px;
}
#contact {
background-color: #cccccc;
width: 900px;
}
footer {
background-color: #00c9fd;
width: 900px;
}
header,
h1 {
padding: 20px 0px 5px 0px;
color: rgb(255, 255, 255);
font-size: 30px;
font-family: Impact;
text-weight: normal;
}
<div id="wrapper">
<header>
<h1>SUPERCOMPUTERS</h1>
</header>
<nav>
Home
Meer informatie
Tijdlijn
</nav>
<div id="bigimage">
<img src="images/titanadfacomputer.jpg" alt="Titan 2 Supercomputer" width="900">
<p>
<b>Lorem</b> <br> ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis turpis sit amet blandit malesuada. Praesent at lacus rutrum, auctor justo sed, consectetur massa. Cras gravida vehicula vulputate. Ut magna odio, mollis non dolor
at, dignissim faucibus eros.
</p>
</div>
<main>
<article>hoi1</article>
<article>hoi2</article>
<article>hoi3</article>
</main>
<div id="contact">hoi4</div>
<footer>hoi5</footer>
</div>

Answer 3

Your selector was wrong. You wrote nav, a which would mean to apply those styles to both nav and a elements. Infact you needed nav a which means to only apply those styles to a elements that are children of nav elements.
nav a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
display: inline-block;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 0px;
float: left;
}

Answer 4

You should remove the width from nav tag.
* {
font-family: Verdana;
font-size: 14px;
margin: 0;
}
p {
padding 20px;
}
#wrapper {
width: 900px;
background-color: #ff3333;
margin: auto;
}
header {
background-color: #00c9fd;
width: 900px;
}
nav {
background-color: #cccccc;
width: 900px;
}
a {
font-family: Impact;
font-size: 15px;
color: black;
text-decoration: none;
text-align: center;
line-height: 50px;
margin: 0px;
padding: 5px 10px;
float: left;
}
nav,
a:hover {
background-color: white;
display: inline-block;
}
#bigimage {
width: 900px;
}
#bigimage,
p {
color: #00c9fd;
background-color: #ffffff;
font-size: 12px;
}
main {
width: 900px;
}
article {
background-color: #cccccc;
width: 900px;
}
#contact {
background-color: #cccccc;
width: 900px;
}
footer {
background-color: #00c9fd;
width: 900px;
}
header,
h1 {
padding: 20px 0px 5px 0px;
color: rgb(255, 255, 255);
font-size: 30px;
font-family: Impact;
text-weight: normal;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style_new.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>SUPERCOMPUTERS</h1>
</header>
<nav>
Home
Meer informatie
Tijdlijn
</nav>
<div id="bigimage">
<img src="images/titanadfacomputer.jpg" alt="Titan 2 Supercomputer" width="900">
<p>
<b>Lorem</b> <br> ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis turpis sit amet blandit malesuada. Praesent at lacus rutrum, auctor justo sed, consectetur massa. Cras gravida vehicula vulputate. Ut magna odio, mollis non dolor
at, dignissim faucibus eros.
</p>
</div>
<main>
<article>hoi1</article>
<article>hoi2</article>
<article>hoi3</article>
</main>
<div id="contact">hoi4</div>
<footer>hoi5</footer>
</div>
</body>
</html>