Shark-Semester Navbar Question

[midwestdv]

So I'm done with the CSS videos.  I'm now trying to create a simple website before I move on hard to javascript videos.  I have a question: 

In your Shark-Semester HTML/CSS you have this: 

<div id="topdiv">
<span style="padding-left: 20px; font-size: 1em; letter-spacing: 2px;"><a href="#">home</a></span>
<span style="float: right; padding-right: 20px;"><a href="#">shark biscuits</a> | <a href="#">shark training leashes</a></span>
</div>

 I want to make a topdiv like this but I don't want to put the style="float:right" in the line.  I want to put that "style" in a style sheet.  How can I do that?  I've try this: 

<div id="topnav">
    
    <ul>
        <li><a href ="http://www.google.com">Home</a></li>
        <li><a href ="http://www.google.com">Our Brands</a></li>
        <li><a href ="http://www.google.com">Shopping Experience</a></li>
        <li class="rightmove"><a href ="http://www.google.com">Shopping History</a></li>
        
        
    </ul> 

 In my style sheet I have this: 

.rightmove {float: right;}

but it does not work.  I want the Home, Our Brands, Shopping Experience link on the left and the Shopping History on the right.  

 

Thanks!

[midwestdv]

Think I figured it out.  in my css style sheet I put:

 #topnav .rightm {float: right;}.  

Then in the html page I put this: 

<div id="topnav" class="navupper">
    
    <ul>
        <li><a href ="http://www.google.com">Home</a></li>
        <li><a href ="http://www.google.com">Our Brands</a></li>
        <li><a href ="http://www.google.com">Shopping Experience</a></li>
        <li class="rightm"><a href="http://www.google.com">Shopping History</a></li>
    </ul>      
  </div>

 This floated the Home, Our Brands and Shopping Experience left and the Shopping History right.  The other class="navbar" is for making the font size a little bigger.  

Only took me all day from 11am to 3pm to figure it out.  lol.  Ugh.