Pages preview fine in DW, but CSS appears to be ignored on live website

Question

This is very basic, but I can't figure it out.  I am the successor webmaster for a very simple 15-page website.   The site has some layout issues that need correcting, and I have rewritten the pages using more of a CSS-based layout since (among other reasons) I don't understand the original tables-based layout.  I used the DW twoColFixedLtHdr.css pre-fab layout.  The re-written pages look fine in the DW and preview fine in Safari and Firefox. The pages did not look right once I uploaded them, so I replaced the pages with the originals.  It appears the stylesheet is being ignored.  I changed the name of the css file to "newstylesheet" to get of the upper-case letters, and have looked over everything closely but can't find the issue.
This is a sample page. http://living4zachary.org/whowearetestpage.html
None of the CSS formatting is there, most notably the left sidebar should have a black blackground and the main text should wrap around it since the sidebar is floated left.
On the host site, all of the html pages are in a sub-directory called public_html. The newstylesheet.css file is a first-level file, right off the main root.
Here is the code, brought forward from a temple, attaching the style-sheet:
  <link href="../newstylesheet.css" rel="stylesheet" type="text/css" />
Here is the code establishing at the beginning of the sidebar:  
<div class="newstylesheet" id="sidebar1"><!-- InstanceBeginEditable name="SidebarLinks" --><a href="index.html">Home</a>
      <p><a href="aboutzac.html">About Zachary</a></p>
      Who We Are</a></p>
      <p><a href="whatissca.html">What Is S.C.A.</a></p>
      <p><a href="#">How You Can Help!</a></p>
      <p><a href="upcomingevents.html">Upcoming Events
      </a>
      <p><a href="oursponsors.html">Our Sponsors</a></p>
      <p><a href="contactus.html">Contact Us</a></p>
      <p> </p> <!-- end #sidebar1 -->
  <!-- InstanceEndEditable --></div>
<!-- end #sidebar1 -->
  <!-- InstanceEndEditable --></div>
  <div id="mainContent"><!-- InstanceBeginEditable name="MainContentArea" -->
I don't think the problem is in this code, since DW is perfectly happy with it.  Somehow, the css is linking up with the page on DW, but not on the server.
This has really got me baffled.  Can somebody please help me?   
Here is a picture of the root directory on the host server, where you can see the newstylesheet.css and the public_html sub-directory that contains all of the live pages and the whowearetestpage:

Answer 1

Ned and Nadia:
Your replies are very appreciated.  They have solved my problem for the test page, and I'm very confident for the other 15 or so pages to follow.
Nadia:  I wish the photo would have attached.  The newstylesheet is there plain as day when I look on the server's file manager.  But, I also couldn't pull it up when I tested it as you did.  There are other css files there that I could access.  They are all on the same file directory - some would open, some wouldn't.  Not only is newestylesheet listed on the server, I can download it and open it up.  This is very strange to me, but a wonderful piece of troubleshooting on your part.  (I have looked a hundred times for some kind of typo, but it just isn't there.)
Ned:  It worked like a charm when I moved the stylesheet to public_htm.   In my DW file directory, I have the css file on the main root and pages in public_htm sub-directory - and that's the same way DW uploaded them to the server.  That's the way the original pages were organized, and that's the way they "appear" to be on the server.  However, since the subject css file was "there but not there", it just wasn't working.
I'm not familiar with how this forum works, but I noticed a "Solved Problem" button.  I'm going to try to click that for both answers.
You guys are great.  I am so grateful for your help.
Steve J.
Plano, TX