[Bootstrap] Problème de footer et de panneau

Bonjour à tous.

Voila je suis en train de réalisé la mise en page d'un site pour le boulot et je rencontre deux soucis dans l'utilisation de Bootstrap que j'utilise pour la première fois.

Dans un premier temps, j'ai utilisé la possibilité avec bootstrap de faire des "panneaux" et la possibilité dans ces panneaux d'y ajouter un "heading" avec du texte. Sauf que pour une raison que je ne saisis pas, sur mon panneau principal, les côtés bug et l'empêche de rendre correctement.

Ci joint le screen :

http://img4.hostingpics.net/pics/938446bug1.jpg

Voici la portion de code concernée :

<section class="container panel panel-info">
			<div class="panel-heading">
				<h2 class="panel-title gras">test text</h2>
			</div>
				<div class="row">
					<article class="col-lg-6 panel-body"><img class="thumbnail img-responsive" src="images/accueil_illustration.jpg" height="340" width="512" alt=""></article>
					<article class="col-lg-6 panel-body">
						<div class="panel panel-info">
							<div class="panel-heading">
								<h5 class="panel-title gras">test text 2</h5>
							</div>
							<form method="#" action="#">
								<div class="panel-body">
									<p><span class="gras">test choix</span></p>
										<p>
											<div class="btn-group" data-toggle="buttons">
											  <label class="btn btn-info">
											    <input type="radio">1
											  </label>
											  <label class="btn btn-info">
											    <input type="radio">2
											  </label>
											  <label class="btn btn-info">
											    <input type="radio">3
											  </label>
											  <label class="btn btn-info">
											    <input type="radio">+
											  </label>
											</div>
											<span class="gras">totest</span>
										</p>
										<p>
											<div class="btn-group" data-toggle="buttons">
												  <label class="btn btn-info">
												    <input type="radio">1
												  </label>
												  <label class="btn btn-info">
												    <input type="radio">2
												  </label>
												  <label class="btn btn-info">
												    <input type="radio">3
												  </label>
												  <label class="btn btn-info">
												    <input type="radio">+
												  </label>
											</div>
												<span class="gras">totest2</span>
										</p>
								</div>
									<p class="panel-body small">
										Devis en 1 minute et sans engagement.
									</p>		
									<div class="panel-body align">
										<button class="btn btn-success btn-lg" type="submit"><span class="glyphicon glyphicon-ok-sign"></span> J'essaie !</button>
									</div>	
							</form>								
						</div>
					</article>
				</div>		
		</section>	

(ligne 2-3 pour l'élément concerné)

Ce qui est bizarre c'est que j'en ai fais un autre en dessous et la cela fonctionne bien.

Deuxième bug, j'ai fixé mon footer avec la classe "navbar-fixed-bottom" mais lorsque que je redimensionne par exemple en taille smartphone, je ne peux pas voir tout le contenu du site car le footer semble passer par dessus.

J'ai tenté des clear:both sur le footer ou sur un <div class="clearfix"> entre la section et le footer, mais sans succès.

Ci joint le screen :

http://img4.hostingpics.net/pics/846159bug2.jpg

La portion de code concernée :

<footer class="container-fluid navbar-fixed-bottom footbottom">
			<div class="row">
				<div class="col-lg-12 align upper white-text">Platinum</div>
			</div>
				<div class="row">
					<div class="col-lg-12 align">
						<ul class="list-inline">
							<li><img src="images/ico_fb.png" width="25" height="25" alt="Facebook"></li>
							<li><img src="images/ico_twitter.png" width="25" height="25" alt="Twitter"></li>
							<li><img src="images/ico_google.png" width="25" height="25" alt="Google +"></li>
							<li><img src="images/ico_linkedin.png" width="25" height="25" alt="LinkedIn"></li>
							<li><img src="images/ico_viadeo.png" width="25" height="25" alt="Vi&eacute;deo"></li>
						</ul>
					</div>	
				</div>
					<div class="row">
						<div class="col-lg-12 align">
							<ul class="list-inline">
								<li><a href="#">Assurance de prêt</a></li>
								<li><a href="#">Qui sommes-nous ?</a></li>
								<li><a href="#">Questions-réponses</a></li>
								<li><a href="#">Contact</a></li>
								<li><a href="#">Mentions légales</a></li>
							</ul>
						</div>
					</div>
</footer>

Merci d'avance à ceux qui m'aideront à résoudre le soucis

Bonjour shupi,

Ce serait beaucoup plus simple de pouvoir accéder à une page en ligne
Ceci étant dit, les outils de développement natifs ou adjoints aux navigateurs (Firebug, etc.) devraient pouvoir te permettre de comprendre ce qui se passe

Merci pour ta réponse, en insistant un peu effectivement j'ai corrigé le 1er problème, mais le deuxième persiste.

Soit je met le footer en position:fixed et dans ce cas en format smartphone il recouvre le container, soit je ne le met pas et dans ce cas il n'est pas collé en bas de page et un écart "moche" subsiste entre le footer et le bas de la page.
J'ai même tenté de jouer sur les tailles en fixant une hauteur, mais ça pose toujours un soucis, dans un sens ou dans l'autre.

Et désolé je ne peux fournir un lien, en effet je travaille en local.

Merci.