How can I find out what css is overriding the css in my style sheet?

I created a print style sheet which links to my html page. Changes to the font, colors etc. work in the print version, but I can not change the size of my divs in the print version. For example, if I have a content div that is 300px X 300px on my page, it won't change it if I change the dimensions in the print version. To figure out the root of the problem, I used inspect element to see if an css was overriding that in my print page. I found that the content div width is controlled by the body width. So I tried changing the content height and the body div in the print stylesheet. That did not work. I also tried creating a separate style sheet for both the main css and the print css. That did not work. Is there another way I can troubleshoot this issue...something similar to breakpoints maybe, but for html?

HTML:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--- TITLE - FROM SPECIFIC TO GENERAL --->
    <title>Page</title>
    <cfinclude template="/assets2011/webfonts/comment.htm" />
    <link rel="stylesheet" type="text/css"        href="/assets2011/MyFontsWebfontsOrderM2845569_css.css" />
    <link rel="stylesheet" type="text/css" href="/assets2011/css/global.css" />
    <link  href="print.css" type="text/css" rel="stylesheet" media="print"/>
    <style>

     body{
     width: 8700px;
     height:2000px;
     overflow: hidden;
     }
     #section{
     width: 8000px;
     float: left;
      height: 1000;
      z-index: 1;
      }
         #content{
       width: 1000px; height:300px; margin-top: 10px; margin-left: 50px; overflow: auto;
       }
      .navbarLeft{
      height: 700px;
      width: 40px;
       top:0;
     z-index: 2;
       position:absolute;
      background-position: 50% 30%;
       background-image: url(navL.png);
     background-repeat: no-repeat;
    opacity: 0.05;
      }
      .navbarLeft:hover{
       opacity: 0.5;
       }
        .navbarRight{
       height: 700px;
      width: 40px;
    top: 0;
     z-index: 2;
    position: absolute;
    background-position: 50% 30%;
    background-image: url(navR.png);
    background-repeat: no-repeat;
    opacity: 0.05;
    left: 2013px;
     }
    .navbarRight:hover{
      opacity: 0.5;
    }
    table,tr,td {
    border:1px solid black;
    }

    </style>

     </head>
      <body>
      <!--Factor 1-->
     <div class="section" id="factor1">
     <div id="content">  
     <!--Begin Content-->
            <p>textiyiuypilkhjkujp;mjl;juipoupoj;hikhiyuiuj</p>
        </div>  
    <!--End Content-->

      <!-- Navigation -->
     <ul class="nav">  
    <a href="#factor2"><div class= "navbarLeft" id="menu" style="left: 755px;"></div></a>
      </ul>
      </div>
      <!--End Factor 1--> 


   <!--Factor 2-->
   <div class="section" id="factor2">
    <div id="content">
        <p>text2khlikhlkj;ljlji0piomloj;lkjoippm,klikp</p>
     </div>
     <ul class="nav">
     <a href="#factor1"><div class= "navbarRight" id="menu" style="left: 2005px;"></div>  
      </a>
     <a href="#factor3"><div class= "navbarLeft" id="menu" style="left: 2755px;"></div></a>
     </ul>
    </div>
     <!--End Factor 2-->

    <!--JavaScript-->
     <script type="text/javascript"   
               src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="../newUI/jquery.easing.1.3.js"></script>
    <script type="text/javascript">
            $(function() {
                $('ul.nav a').bind('click',function(event){
                    var $anchor = $(this);
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1000);
                    event.preventDefault();
                });
            });
      </script>
      </body>
    </html>

CSS Print Style Sheet:

       body{
         width: 1000px;
        }

    #section, .navbarLeft, .navbarRight{
    display:none;
    }

    #content{
       font-size: 110px;
       overflow:visible;
       height: 1000px;
       page-break-after: always;
       margin-top:10px; 
       margin-left:50px; 
    } 

    p a:after {
    content: " (" attr(href) ")";
    font-size: 50%;
    }

Solution

I have found that the Chrome browser developer tools are fantastic for debugging CSS issues.

Open the page in Chrome and hit F12

enter image description here

Look to the right on the elements tab and you'll see all the CSS that is being applied to the HTML element selected on the left.

You can edit the CSS in place in the toolbox and it will immediately update the browser window with your changes.

More information about the tools can be found here: https://developers.google.com/chrome-developer-tools/