Bonjour ! j'ai un petit soucis ! 

voici mon code html concernant la section en question : 

    		<!-- Section 01 -->
    		
   		<div class=row>
    			<section id=tea>
	    			<div class="col-sm-3">
		    			<aside>
			    			<div><img src="images/theiere.png" alt="logo en forme de theière" /></div>
			    			<h3>SEVEN POTS</h3>
			    			<h4>COLLECTION</h4>
			    		</aside>
		    		</div>

		    		<div class="col-sm-9">
		    			
			    		<article>
			    			<h2>Kettle Thermo Pot<br />274.50 $</h2>

			    			<p>♥ ADD TO FAVS</p>


			    			<img src="images/theiere.jpg" alt="théière" />

			    			<div><img src="images/noor_jahaan.png" alt="photo de Noor Jahann" /></div>
			    			<legend>BY NOOR JAHAAN</legend>

			    			<h1>Tea<br/>
			    			O'Clock</h1>
			    		</article>
			    	
			    	</div>
	    		</section>
	    	</div>

Le code css : 

/*Section 1 */

#tea
{
	display:flex;
	height: 365px;
	
}

#tea aside
{
	height: 365px;
}

#tea article
{
	display: flex;
	height: 365px;
}

Rien de bien méchant sauf que bah… j'obtiens ca : (alors que le header fonctionne bien comme vous pouvez le voir, donc je comprend pas le soucis…)

Si quelqu'un peut me venir en aide ce serait la bienvenue… parce que les marges n'ont pas de sens pour moi là ^^" surtout que toutes les modifications de marges que j'ai effectué pour le moment sur le header sont bien cloisonnées dans mon css

ah et dans le bootstrap j'ai modifié le container à ces endroits :

.container {
  width: 1500px;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1500px;
  }