Debugging CSS Float

CSS Debugging is a skill that just about anybody working in front-end development will have to tangle with eventually. I myself am a complete newbie to it all so my question is, what is the best way to debug CSS float problems?

I'm following the code written in the "How to Make a Website" project (which I finished) and my problem is specifically with the responsive code used on the nav. I can narrow down the problem by stripping out the code piece by piece until the problem disappears but I'm not sure what to do with CSS once I've narrowed down the problem.

A personal project I'm working on looks very similar to the code given in the project. Here's the relevant HTML:

<header>
        <h1>Blackjack Ptak</h1>
        <h2>Julian Ptak | Web Developer</h2>
        <h3>When the coding gets tough, the tough get coding.</h3>

        <nav>
            <ul>
                <li><a href="#">About</a></li>
               <li><a href="#">Code</a></li>
               <li><a href="#">Stuffs</a></li>
           </ul>
        </nav>
    </header>

And I style it in a main.css file like so:

/******************************
HEADER
******************************/

header{
    background:#0290FD;
    margin: 0 0 30px 0;
    padding: 0 0 10;    
    border-bottom: 5px solid #088F00;
}

nav {
    text-align:center;
    padding:10px 0;
    margin:20px 0 0;
}

nav ul{
    list-style:none;
    margin: 0 10px;
    padding: 0; 
}

nav li {
    display: inline-block;
}

nav a{
    font-weight:800;
    padding: 15px 10px;
    color:#FFFFFF;  
}

This all works fine but when I add the CSS file responsive.css with the following code:

nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;
  }

The nav just completely disappears. Now my question is more broad than simply "how do I fix this?" because I do want to learn how to do this on my own as well. In a situation like this, I've narrowed down the problem to the float: right; line in the responsive.css file but now I can't use an inspector in Chrome to see it because... it's not there. So what do I need to mess with or what techniques are recommended for squashing these sorts of bugs? Thanks in advance everybody!