Specific display of inline-block with H1 and Image - css

Question

I'm making my page and while doing it I've encountered a big problem for me because it makes my all effort useless if i can't do it.
In my page Header with menu and everything i can't make 3 images and one H1 to be displayed inline. I wouldn't be posting but I've tried everything and it doesn't work. in a trivial web site it works perfectly but i don't know why in my it doesn't work...
here is my code.
<div id="header">
<img src="img/pl.jpg" width="25" height="15" alt="pl">
<img src="img/no.jpg" width="25" height="15" alt="no">
<img src="img/usgb.jpg" width="25" height="15" alt="en">
<h1 class="title"><?php echo $TITLE; ?></h1>
<div id="nav">
<?php echo $ABOUTME; ?>
<?php echo $GOALS; ?>
<?php echo $ACHIEVEMENTS; ?>
<?php echo $CV; ?>
<?php echo $CREATIVITY; ?>
<?php echo $FREETIME; ?>
<?php echo $CONTACT; ?>
<div class="navEnding"></div>
</div>
And my CSS:
#header {
position:fixed;
margin:0;
padding:0;
top:0%;
left:0%;
width:20%;
height:100%;
z-index:50;
color:#f9f89d;
font-family:"Allura", cursive;
font-size:130%;
background:#f00;
}
.languageFlag { position:relative; display:inline-block; margin:0; padding:0; width:auto; }
.languageFlag img { display:inline-block; width:100%; height:100%; }
.title { position:relative; display:inline-block; margin:0%; padding:0; left:200%; width:200%; height:5%; overflow:hidden; }
#nav {
position:relative;
margin:0;
padding:0;
width:500%;
height:500%;
background:#00f;
}
#nav a:link, #nav a:visited {
display:inline-block;
margin:0.5% 0;
background:#385160;
text-align:left;
text-decoration:none;
border:0;
color:#f9f89d;
}
#nav a:hover, #nav a:active {
text-align:right;
}
.nav1 { width:55%; padding:0 40% 0 5%; }
.nav2 { width:45%; padding:0 50% 0 5%; }
.nav3 { width:35%; padding:0 60% 0 5%; }
.nav4 { width:30%; padding:0 65% 0 5%; }
.nav5 { width:25%; padding:0 70% 0 5%; }
.nav6 { width:20%; padding:0 75% 0 5%; }
.nav7 { width:15%; padding:0 80% 0 5%; }
.navEnding { display:inline-block; margin:0.5% 0; background:#385160; width:90%; min-height:10%; }

Answer 1

Try this. I also removed some unnecessary css.
Fiddle
CSS
#header {
position:fixed;
margin:0;
padding:0;
top:0%;
left:0%;
width:100%;
height:20%;
z-index:50;
color:#f9f89d;
font-family:"Allura", cursive;
font-size:130%;
background:#f00;
}
.languageFlag {
position:relative;
display:inline-block;
margin:0;
padding:0;
width:auto;
}
.languageFlag img {
display:inline-block;
width:100%;
height:100%;
}
.title {
display:inline-block;
}

Answer 2

#header is not long enough for the h1 to fit inside it. try making width:100%
#header {
width: 100%;
}
http://jsfiddle.net/MtcSY/
Edit: hand rolling this advanced css can be very dififcult, I would recommend using a framework like bootstrap