title: CSS Nesting Not Getting Expected
body: <p>I'm new to HTML/CSS so this may be a stupid/basic question, but I legitimately cannot find the answer to why this is happening:</p>
  
  <p>I am making a super-basic webpage where there are buttons in the navigation bar that change the image that is displayed in the content section. I just want to change the appearance of the buttons but seem to be unable to do so:</p>
  
  <p>HTML doc:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;homepage&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="homestyle.css"&gt;
      &lt;script src='navfunc.js'&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!-- WRAPPER DIV --&gt;
  &lt;div id='wrapper'&gt;
  
  &lt;!-- HEADER DIV --&gt;
  &lt;div class = 'header'&gt;
  &lt;h1&gt; Price History and Stock Data &lt;/h1&gt;
  
  &lt;/div&gt;
  
  &lt;!-- SIDEBAR/NAV DIV --&gt;
  &lt;div class = 'sidebar'&gt;
  &lt;nav&gt;
      &lt;ul&gt;
      &lt;li&gt; &lt;button type="button" onclick="navfunc('AMBA')"&gt; AMBA &lt;/button&gt; &lt;/li&gt;
      &lt;li&gt; &lt;button type="button" onclick="navfunc('APH')"&gt; APH &lt;/button&gt; &lt;/li&gt;
      &lt;li&gt; &lt;button type="button" onclick="navfunc('ASX')"&gt; ASX &lt;/button&gt; &lt;/li&gt;
      &lt;li&gt; &lt;button type="button" onclick="navfunc('B')"&gt; B &lt;/button&gt; &lt;/li&gt;
      &lt;li&gt; &lt;button type="button" onclick="navfunc('BDS')"&gt; BDSI &lt;/button&gt; &lt;/li&gt;
      &lt;li&gt; &lt;button type="button" onclick="navfunc('CNC')"&gt; CNC &lt;/button&gt; &lt;/li&gt;
      &lt;li&gt; &lt;button type="button" onclick="navfunc('CNK')"&gt; CNK &lt;/button&gt; &lt;/li&gt;
      &lt;li&gt; &lt;button type="button" onclick="navfunc('COLB')"&gt; COLB &lt;/button&gt; &lt;/li&gt;
      &lt;li&gt; &lt;button type="button" onclick="navfunc('EWBC')"&gt; EWBC &lt;/button&gt; &lt;/li&gt;
      &lt;li&gt; &lt;button type="button" onclick="navfunc('FB')"&gt; FB &lt;/button&gt; &lt;/li&gt;
      &lt;li&gt; &lt;button type="button" onclick="navfunc('GPRO')"&gt; GPRO &lt;/button&gt; &lt;/li&gt;
      &lt;li&gt; &lt;button type="button" onclick="navfunc('HAIN')"&gt; HAIN &lt;/button&gt; &lt;/li&gt;
      &lt;li&gt; &lt;button type="button" onclick="navfunc('HEI')"&gt; HEI &lt;/button&gt; &lt;/li&gt;
      &lt;li&gt; &lt;button type="button" onclick="navfunc('LCI')"&gt; LCI &lt;/button&gt; &lt;/li&gt;
      &lt;li&gt; &lt;button type="button" onclick="navfunc('MANU')"&gt; MANU &lt;/button&gt; &lt;/li&gt;
      &lt;li&gt; &lt;button type="button" onclick="navfunc('NCLH')"&gt; NCLH &lt;/button&gt; &lt;/li&gt;
      &lt;li&gt; &lt;button type="button" onclick="navfunc('RCL')"&gt; RCL &lt;/button&gt; &lt;/li&gt;
      &lt;li&gt; &lt;button type="button" onclick="navfunc('TSN')"&gt; TSN &lt;/button&gt; &lt;/li&gt;
      &lt;li&gt; &lt;button type="button" onclick="navfunc('TSO')"&gt; TSO &lt;/button&gt; &lt;/li&gt;
      &lt;li&gt; &lt;button type="button" onclick="navfunc('WWD')"&gt; WWD &lt;/button&gt; &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;/div&gt;
  
  &lt;!-- CONTENT DIV --&gt;
  &lt;div class = 'content'&gt;
  &lt;img id='hmap' src = 'AMBA_heatmap.png' alt='AMBA', style="width: 880px; height: 660px;"&gt;
  
  &lt;/div&gt;
  
  &lt;!-- FOOTER DIV --&gt;
  &lt;div class = 'footer'&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS Doc:</p>
  
  <pre><code>/* WRAPPER ------------------------------------------------------------------ */
  #wrapper{
      margin-left:auto;
      margin-right:auto;
      width:1280px;
  }
  
  /* HEADER ------------------------------------------------------------------ */
  div.header{
      background-color: #87CEFA;
      font-family: 'Trebuchet MS', Verdana, Sans-Serif ;
      text-decoration: underline;
      text-align: center;
      font-size: 150%;
      color: #286F02;
      padding: 25px;
      margin: 0px;
      border-bottom: 2px solid black;
  }
  
  /* SIDEBAR ------------------------------------------------------------------ */
  div.sidebar{
      float: left;
      height: 1024px;
      width: 225px;
      border-right: 2px solid black;
      border-bottom: 2px solid black;
      border-top: 2px solid black;
      padding: 5px;
      margin:2px;
      background-color: #0F4FAF; /* Blue*/
  
  }
  
  div.sidebar ul {
      list-style-type: none;
      margin-top: 10px
  }
  div.sidebar ul li{
      margin: 10px;
      font-size: 22px;
  }
  
  
  nav.sidebar button {
      background-color: '#4CAF50'; /* Green */
      border: none;
      color: white;
      width: 95px;
      padding: 10px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
  }
  
  /* CONTENT ------------------------------------------------------------------ */
  div.content {
      width: 910px;
      height: 1024px;
      background-color:#C0C0C0;
      border: 2px solid #0F0F0F;
      border-collapse: collapse;
      float: left;
      margin:1px;
      padding:5px;
  }
  
  /* FOOTER ------------------------------------------------------------------ */
  div.footer {
      width: 100%;
  }
  </code></pre>
  
  <p>The center of attention in these docs is just the nav bar section where i write:</p>
  
  <pre><code>div.sidebar button {
      background-color: '#4CAF50'; /* Green */
      border: none;
      color: white;
      width: 95px;
      padding: 10px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
  }
  </code></pre>
  
  <p>But the buttons still take on default button values.
  I messed around with it a little and got some styles to change in the browser but then if i changed them again or changed them back, they stopped working... </p>
  
  <p>Sorry if this is kinda vague, but I'm under the impression that there is something fundamental that I'm missing and can't seem to figure out what it is.</p>
  
  <p>Thanks for any help/advice!</p>