title: CSS in site.css not working with <div id> in layout in asp.net
body: <p>I am trying to get this:</p>
  
  <p><img src="https://i.stack.imgur.com/mHUhL.jpg" alt="enter image description here"></p>
  
  <p>But i am getting this:</p>
  
  <p><img src="https://i.stack.imgur.com/mxNNM.jpg" alt="enter image description here"></p>
  
  <p>My _Layout.cshtml:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt; 
      &lt;title&gt;@ViewBag.Title&lt;/title&gt; 
      &lt;link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /&gt; 
      &lt;script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" 
  type="text/javascript"&gt;&lt;/script&gt; 
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div id="header"&gt; 
          &lt;div class="title"&gt;SPORTS STORE&lt;/div&gt; 
       &lt;/div&gt; 
       &lt;div id="categories"&gt; 
           @{Html.RenderAction("Menu", "Nav");} 
       &lt;/div&gt; 
       &lt;div id="content"&gt; 
          @RenderBody() 
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My Menu.cshtml:</p>
  
  <pre><code>@model IEnumerable&lt;string&gt; 
  
  @{ 
      Layout = null; 
  } 
  
  @Html.ActionLink("Home", "List", "Product") 
  
  @foreach (var link in Model)
  { 
      @Html.RouteLink(link, new
                            {
                                controller = "Product",
                                action = "List",
                                category = link,
                                page = 1
                            }) 
  }
  </code></pre>
  
  <p>My site.css:</p>
  
  <pre><code>BODY { font-family: Cambria, Georgia, "Times New Roman"; margin: 0; }
  DIV#header DIV.title, DIV.item H3, DIV.item H4, DIV.pager A {
      font: bold 1em "Arial Narrow", "Franklin Gothic Medium", Arial;
  }
  DIV#header { background-color: #444; border-bottom: 2px solid #111; color: White; }
  DIV#header DIV.title { font-size: 2em; padding: .6em; }
  DIV#content { border-left: 2px solid gray; margin-left: 9em; padding: 1em; }
  DIV#categories { float: left; width: 8em; padding: .3em; }
  
  DIV.item { border-top: 1px dotted gray; padding-top: .7em; margin-bottom: .7em; }
  DIV.item:first-child { border-top:none; padding-top: 0; }
  DIV.item H3 { font-size: 1.3em; margin: 0 0 .25em 0; }
  DIV.item H4 { font-size: 1.1em; margin:.4em 0 0 0; }
  
  DIV.pager { text-align:right; border-top: 2px solid silver;
      padding: .5em 0 0 0; margin-top: 1em; }
  DIV.pager A { font-size: 1.1em; color: #666; text-decoration: none;
        padding: 0 .4em 0 .4em; }
  DIV.pager A:hover { background-color: Silver; }
  DIV.pager A.selected { background-color: #353535; color: White; }
  
  DIV#categories A  
  {
      font: bold 1.1em "Arial Narrow","Franklin Gothic Medium",Arial; display: block;
      text-decoration: none; padding: .6em; color: Black;
      border-bottom: 1px solid silver;
  }
  DIV#categories A.selected { background-color: #666; color: White; }
  DIV#categories A:hover { background-color: #CCC; }
  DIV#categories A.selected:hover { background-color: #666; }
  </code></pre>