Hello everyone!

I make a webpage with bootstrap navigation. My problem is, I don't know how can I move the images in the header in the right position. I have 3 image in my header and the bootstrap navbar. I want to make my header to look like in the pic:

my index.php:
<?php defined('_JEXEC') or die; // Add JavaScript Frameworks JHtml::_('bootstrap.framework'); // Load optional rtl Bootstrap css and Bootstrap bugfixes JHtmlBootstrap::loadCss($includeMaincss = true); ?> <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" <jdoc:include type="head" /> <!--[if lt IE 9]> <script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script> <![endif]--> <link href='http://fonts.googleapis.com/css?family=Tenor+Sans' rel='stylesheet' type='text/css'> <link href="templates/topholiday/css/custom.css" rel="stylesheet" type="text/css"> </head> <body> <header class="row-fluid"> <div class="span4"> <a href="/"><img class="logo" src="templates/topholiday/images/logo.png" alt="click for home. " class="pull-left" /></a> </div> <div align="right"> <a href="https://www.facebook.com/topholidaytravel" target="_blank"><img src="templates/topholiday/images/facebook-button.jpg" alt="click to facebook" /></a></div> <img class="travel-bag" src="templates/topholiday/images/taska.png" alt="travel bag" class="pull-right" /> </header> <div class="container"> <!-- FOR CENTER PAGE --> <div class="row-fluid"> <nav class="span12 navbar"> <div class="navbar-inner"> <div class="container-fluid"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse collapse"> <jdoc:include type="modules" name="nav" style="none" /> </div> </div> </div> </nav> </div> <div class="row-fluid"> <div class="span12"> <jdoc:include type="modules" name="slideshow" style="none" /> </div> </div> <div class="row-fluid"> <div class="span2"> <jdoc:include type="modules" name="left" style="html5" /> </div> <div class="span8"> <jdoc:include type="message" /> <jdoc:include type="component" /> </div> <div class="span2"> <jdoc:include type="modules" name="right" style="html5" /> </div> </div> </div> <!-- FOR CENTER PAGE --> <footer class="row-fluid"> <div class="span4"> <p>&copy; 2012-2013 CSABA DZSURNIK WEBDESIGN. ALL RIGHTS RESERVED.</p> <nav class="span4"><jdoc:include type="modules" name="footer" style="html5" /></nav> </div> </footer> </body> </html>
my custom.css:
@charset "utf-8"; /* CSS Document */ body { background-image:url('../images/bg-header.jpg'); background-repeat:repeat-x; background-color: white; color:black; font-family: Tenor Sans, Verdana, Geneva, sans-serif; } /* navbar text styling */ nav { text-transform: uppercase; floating: center; } header { height:308px; } header p { padding: 0.1em 0 0 0; font-size: 1.15em; } img.logo { padding: 4em 0 0 0; } img.travel-bag { padding: 6em 0 0 0; right: 0; } .facebook { padding: 0 10em 0 0; }
thanks for the help