Hello, I am working on a webpage for my grandfather's charity. Everything has been going fine. Except one thing: I can't get the width of the <nav> bar to automatically become the width of the page. I use a dual monitor setup(15" MacBook Pro 1440x900 and a 23" Acer 1920x1080).
Here is the screen shot on acer monitor:
http://flic.kr/p/abNdyG
Here is the screen shot on MBP monitor:
http://flic.kr/p/abKoiP
I would like it to look like the MBP screenshot on every monitor, if possible.
Here is my code:
<html>
<head><title>Foundation for Haitians</title></head>
<style type="text/css">
body{
background-color: black;
}
header
{
padding-left: 10px;
padding-top: 10px;
/*background-image:url(heading1.jpg); */
background-color: black;
font-family: fantasy, sans-serif;
color:beige;
font-size:36;
height:120px;
}
nav
{
margin-top: 10px;
font-size: 16;
width: 1400;
float:right;
background-color: black;
padding: 10px 10px 10px 10px;
display: -webkit-box;
border: 2px solid beige;
-webkit-box-direction: horizontal;
-webkit-border-radius: 6px;
color: white;
margin-bottom: 0px;
}
nav a
{
font-family: fantasy;
display: block;
-webkit-box-flex: 1;
text-align: center;
-webkit-transition: all .5s linear;
}
nav a:hover
{
color:red;
}
a:link{ color:white;}
p{
color:beige;
font-size: 26;
font-family: fantasy;
margin-top: 200px;
}
</style>
<header>Foundations for Haitians
<br>
<nav>
<a href="home.html" target="content">Home</a>
<a>|</a>
<a href="mission.html">Our Mission</a>
<a>|</a>
<a href="slideshow.html">Slideshow</a></a>
<a>|</a>
<a href="contact.html">Contact Us</a>
<a>|</a>
<a href="donate.html">Donate</a>
<a>|</a>
<a href="other.html">Other</a>
<a>|</a>
<a href="other1.html">Other 1</a>
</nav>
</header>
</html>
Thanks for all of the help
