Make the logo and links on the same line in header

I'm making a website and in the header I need a logo and a horizontal set of links. The logo must be on the left and the links must be on the right. The problem I'm running into is that if I add too many links to the list, it will wrap to the next line, but I need it to be closely attached to the right side of the page. Both the banner and the list of links are in the header. My CSS is as follows.

header{
    width:100%;
    height:10%;
    background-color:#AC222A;
    color:white;
}

links{
    position: relative;
    height: 10;
    width: 10%;
    float: right;
    top: 35%;
    display: inline;
}

banner{
    position: absolute;
    padding: 1%
    left: 1%;
    height; 10;
    width: 15%
    float: left;
}

And the HTML is as follows:

<html>

<head>
    <link rel="stylesheet" href="index.css">
</head>

<div id="header">
    <div id = "banner">
        <img src="pictures/logo_logo.png">
    </div>
    <div id = "links">
        <a href="">home</a>
        &nbsp;|&nbsp;
        <a href="About.html">About</a>    
        &nbsp;|&nbsp;
        <a href="Contact.html">Contact Us</a>
    </div>
</div>

<body>
</body>

</html>

Solution

It's missing the # on the id names in the CSS. In fact the whole layout can be done with a simple float, so move links before banner in the HTML.

#header {
    background-color:#AC222A;
    color:white;
}
#links {
    float:right;
}

<div id="header">
    <div id="links">
        <a href="">home</a> &nbsp;|&nbsp; <a href="About.html">About</a> &nbsp;|&nbsp; <a href="Contact.html">Contact Us</a>
    </div>
    <div id="banner">
        <img src="pictures/logo_logo.png"/>
    </div>
</div>

Edit: (transferring the comments into this) - to fix the problem based on your existing code, you have #links{width:10%;} set there, just remove that.