Century Gothic Font Usablility Question

1- is my site showing up as century Gothic

No.

or sans serif?

Yes.

2- is century Gothic specific to a certain OS?

No, it's not included in any OS. It is often installed by MS Office.

3- is there any improvements in the css that could load century gothic

You could use @font-face embedding to have recent browsers download and use the font. Unfortunately this isn't allowed for in the usual Monotype license; you'd have to get a special embedding license. Which may not even exist for that font.

(possibly different filenames/font names for the same font?)

No, the Monotype edition is the only variant I'm aware of.

If you are set on a geometric sans, you could try including Futura ("Futura", "Futura Std", "Futura LT Medium", "Futura Md BT", "Futura No 2"), Avenir ("Avenir Medium", "Avenir 55 Roman", "Avenir Next LT Pro"), or even Avant Garde in desperate times. But none of these, or any other geometric, are bundled with operating systems, so you have a pretty small chance of it working.

Do I need it in quotes too?

Yes.

How do I horizontally center my Nav menu in CSS?

Add text-align: center; to your .nav-menu class.

Add display: inline-block; to your nav element.

Explanation: inline-block makes your nav element only the size of its children instead of the full width of its parent. Then, centering the content of .nav-menu tells .nav-menu to center its children, including nav.

/*CSS file - Patrick White*/
body {  width: 75%;  min-width: 720px;  margin: 0 auto;  /*vertical center*/  font-size: 1em;  font-weight: bold;  font-family: "Century Gothic", Palatino, Georgia, Serif;  color: #02849D;  /*dark navy blue*/  text-align: left;  /*Personal Addition*/  background-image: url('../Images/Black_Rainbow.jpg');  background-size: 175% 100%;  /*mess with*/  background-repeat: no-repeat;  /*boxing, borders, and padding*/  margin-left: 10%;  margin-right: 10%;  padding: 0.35em;  border-style: double;  border-color: #006E5F;  border-width: 4px;  border-width: 4px;}
h1 {  font-family: Rockwell, Baskerville, Warnock, Serif;  font-size: 2.2em;  font-weight: bold;  color: #02849D;  text-align: center;  padding: 0.75em;  border-style: solid;  border-color: #006E5F;  border-width: 4px;}
h2,h3 {  font-family: Rockwell, Baskerville, Warnock, Serif;  font-size: 1.5em;  margin-left: 10%;  margin-right: 10%;  padding: 0.5em;  border-style: solid;  border-color: #006E5F;  border-width: 3px;  margin: 1em;}
.box {  /*a class tag that I use for my div elements, since I didn't want this to apply for all of my div elements I made a class so that I can easily state whether or not it should apply*/  margin-left: 10%;  margin-right: 10%;  padding: 0.35em;  border-style: solid;  border-color: #006E5F;  border-width: 3px;  margin: 1em;  background-color: #111111;}
p {  margin-left: 10%;  margin-right: 10%;  padding: 0.35em;  border-style: solid;  border-color: #00594D;  border-width: 5px;  margin: 1em;}
ul {  margin-left: 10%;  margin-right: 10%;  padding: 0.35em;  border-style: solid;  border-color: #00594D;  border-width: 5px;  margin: 0.35em;}
table {  border: 0.2em solid black;  background-color: white;}
th {  border: 0.15em solid black;  padding: 0.35em;  text-align: center;  font-weight: bolder;}
td {  border: 1px solid black;  padding: 0.35em;  color: black;  font-weight: normal;}
a:link {  color: #31AEC5;  /*dark blue*/}
a:visited {  color: #015261;  /*darker blue*/}
a:hover,a:focus {  color: #505050;  /*grey*/}
nav {  clear: left;  display: inline-block;  font-size: 1.2em;}
.gamebutton {  background-color: #707070;  /*grey*/  border: none;  color: #02849D;  /*bright blue*/  width: 450px;  height: 75px;  text-align: center;  line-height: 75px;  /*centers the text vertically*/  text-decoration: none;  display: inline-block;  font-size: 1.1em;  font-family: Century Gothic;  font-weight: bold;}
.info {  width: 40%;  font-size: 1.25em;  float: left;}
.temp {  font-style: italic;}
#main {  color: #008B8B;  clear: left;}
#overview {  color: #7FFFD4;}
#overview:first-letter {  font-size: 1.3em;  font-family: "Times New Roman", sans-serif;}
#DigDug {  float: right;  position: absolute;  right: 0;  border-width: 0;}
#DigCaption {  position: absolute;  left: 833.5px;  bottom: 10px;  font-size: 13px;}
#BlockGame {  float: right;  position: absolute;  right: 550px;  border-width: 0;}
#skipnav {  position: relative;  right: 12.5%;  width: 10.5em;}

/* navigation menu styles */
nav ul {  list-style-type: none;  border: 0;  padding-bottom: 1em;}
nav ul li {  float: left;  margin-right: 1em;}
nav ul li a {  padding: 0.125em 0.5985243em;  text-decoration: none;  /* no underline */  background-color: #55FA99;  /* dark green */  border: 2px solid black;  border-top-left-radius: 1em 1em;  /* rounded corner! */  border-top-right-radius: 1em 1em;  /* another rounded corner! */}
nav ul li a:hover,nav ul li a:focus {  color: #014C65;  background-color: #006E5F;  /*medium green*/  font-weight: bold;}
.nav_menu {  border: 0;  text-align: center;}

<div class="box" id="skipnav">  <a href="#main">Skip to main content</a></div><h1>Patrick White Web Portfolio</h1><div class="info">  <ul>    <li>Patrick White</li>    <li><a href="mailto:TotallyRealEmail@GOATS.com">TotallyRealEmail@GOATS.com</a></li>    <li>843-653-3474</li>    <li>link to one of my favourite <a href="http://eelslap.com/" target="_blank">websites</a></li>    <li>If you like goats, download my presentation! In either: <a href="Images/GOATS.pdf" download>PDF</a>, <a href="Images/GOATS_VIDEO.wmv" download>Video</a>, <a href="Images/GOATS.odp">Open Office</a> or <a href="Images/GOATS.ppt">Microsoft Powerpoint</a></li>  </ul></div><div class="info">  <ul>    <li>I.T. 9 (1-2)</li>    <li>Mr. Gabriel Jones</li>    <li>Web Design</li>    <li><a href="http://go.vsb.bc.ca/schools/pointgrey/Pages/Default.aspx" target="_blank">Point Grey Secondary</a>, 2016-2017</li>  </ul></div><div class="nav_menu">  <nav>    <ul>      <li><a href="index.html">Home</a></li>      <li><a href="Accesibility.html">Accessibility</a></li>      <li><a href="Usability.html">Usability</a></li>      <li><a href="Graphics.html">Graphics</a></li>      <li><a href="JavaScript.html">JavaScript</a></li>      <li><a href="Tools.html">Tools</a></li>      <li><a href="Video.html">Video</a></li>      <li><a href="Games.html">Games</a></li>    </ul>  </nav></div><div>  <main id="main">    <p id="overview">This web portfolio includes examples of my works in Mr. Jones' Web Design class. It also includes my reflections (below) in what I learned with each unit of the course.</p>    <h2>Unit 2</h2>    <p>In this section, I learned the basics of a fundamental scripting language for website design; <i>HTML5</i>. I learned about some of the many tags that are useful in the design of websites that will assist me in my prospective career in web design.      In this unit I was presented with many resources to ensure that my HTML code was formatted correctly and was error-free, in the form of online generators. We also learned a great deal about how to incorporate links and images into our file, of which      I found particularly interesting. In this section we learned a lot about how to input the actual content of our websites, and I am very excited for the future units in which we get to further design this content to seem visually appealing.</p>    <h2>Unit 3</h2>    <p class="temp">This section will be completed soon</p>    <h2>Unit 4</h2>    <p class="temp">This section will be completed soon</p>    <h2>Unit 5</h2>    <p class="temp">This section will be completed soon</p>    <h2>Unit 6</h2>    <p class="temp">This section will be completed soon</p>    <h2>Unit 7</h2>    <p class="temp">This section will be completed soon</p>  </main></div><a href="http://www.coolmath-games.com/0-me-and-the-key" target="blank" class="gamebutton">Click to Play One of My Favourite Games!</a><!--Game Button-->

Can I have multiple background images using CSS?

CSS3 allows this sort of thing and it looks like this:

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

The current versions of all the major browsers now support it, however if you need to support IE8 or below, then the best way you can work around it is to have extra divs:

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>

body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}

Century Gothic Font Usablility Question