How to resize Brand Image?

I'm very new to CSS and Bootstrap.

I have large brand image (logotipo-white), and I want to resize it to 30% of its original size. However, when I apply the following code the image appear small but still occupies the original space, pushing the nav links to another line.

How can I solve this?

HTML:

<body>
<div class = "navbar navbar-fixed-top">
    <div class = "navbar-inner">
        <div class = "container">
            <ul class = "brand"><img src="images/logotipo-white.png"></ul>
            <ul class = "nav">
                <li class = "active">
                    <a href = "#">Home</a>
                </li>
                <li><a href = "#">About</a></li>
                <li><a href = "#">Portfolio</a></li>
                <li><a href = "#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>
</body>

CSS:

body{
background-image:url('../images/bg-green.jpg') ;
}
.brand img{
max-width: 30%;
}