I've tried using vertical-align and color in static_nav div but it didn't work. Is this because its inside of the header? how would I fix this?

 <!DOCTYPE HTML>
 <html lang ="en">
 <meta charset = "utf-8" />
 <head>
 <title>Example Page</title>
 <link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
 </head>

  <body>

  <div id = "container">
    <header>
   <div id = "static_nav">
    <nav>
     <a href="Home">Home</a>
     <a href="About Us">About Us</a>
     <a href="Contact Us">Contact US</a>
     <a href="Gallery">Gallery</a>
     <a href="Member Login">Member Log-in</a>
   </nav>
  </div>
   </header>

<div id = "block_two">
  <p></p>
</div>

<div id = "block_three">
  <p> Block Three </p>
</div>

<div id ="block_four">
  <p> Block Four </p>
</div>

</body>
 <div id = "end_block">
  <footer>
   <p> This is where the footer would go </p>
  </footer>
 </div>
</div>
</html>

Here is the CSS

body {

height: 100%;
width: 100%;
max-width: 100%;
overflow-x: hidden;
margin: 0;
}

Here is the #static_nav nothing happens when I do that. I'm not quite sure how to remedy this. I've been able to modify the other divs but I'm not to sure why I can't in this case.

div#static_nav{

font-family: Verdana, sans-serif;
padding-top: 10px;
text-align: right;
width: 100%;
height: 5vh;
background-color: #000000;
position:fixed;
opacity: .75;
color:;

}


div#container {

margin-top: 10px
height: 10vh
width: 100%;
background-color: #16BA81;
color:;
}

Also, "text-align: right" pushes the text to the right side border. How would I add a little space between the border and text so that its not directly on the border. I tried padding and margin but it didn't move it.

Thank you for the help.

Solution

To color the links in #static_navbar, you have to style them directly. Otherwise the browsers default link color will be used:

div#static_nav a {
  color: white;
}

To vertically align the links, one possibility is to use the padding of the #static_navbar on top and bottom, e.g.:

padding: 10px 0;

Also make sure, that your markup is valid. Your closing body take hast to be set directly before the closing html tag.

body {
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
}
div#static_nav {
  font-family: Verdana, sans-serif;
  padding: 10px 0;
  text-align: right;
  width: 100%;
  background-color: #000000;
  position: fixed;
  opacity: .75;
}
div#static_nav a {
  color: white;
}
div#container {
  margin-top: 10px height: 10vh width: 100%;
  background-color: #16BA81;
}

<!DOCTYPE HTML>
<html lang="en">
<meta charset="utf-8" />

<head>
  <title>Example Page</title>
  <link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
</head>

<body>

  <div id="container">
    <header>
      <div id="static_nav">
        <nav>
          <a href="Home">Home</a>
          <a href="About Us">About Us</a>
          <a href="Contact Us">Contact US</a>
          <a href="Gallery">Gallery</a>
          <a href="Member Login">Member Log-in</a>
        </nav>
      </div>
    </header>

    <div id="block_two">
      <p></p>
    </div>

    <div id="block_three">
      <p>Block Three</p>
    </div>

    <div id="block_four">
      <p>Block Four</p>
    </div>


    <div id="end_block">
      <footer>
        <p>This is where the footer would go</p>
      </footer>
    </div>
  </div>
</body>

</html>