Div recalcitrante

bonjour a tous

je suis en train d aider une amie pour son site tres basique je l admet , mais bon faut bien commencer

j ai des soucis avec les divs que je désire placer sous la vidéo

j ai deux divs avec chacune 3 divs
donc 2 rangées de 3 colonnes

mais je n arrive pas a les positionner sous ma vidéo
je souhaiterais donc pouvoir régler comme je veux l espace entre la video et mon premier div
et regler l espace entre ma première rangee et ma deuxième rangée

voici mon code

https://codepen.io/flexi2202/pen/QWKydWJ

Merci de l aide

2 réponses

  • Votes
  • Date
  • Date décroissante
  1. bonjour
    merci pour la reponse
    je comprends parfaitement bien la raison
    je le poste donc ici
    635d79f4fd/5f6a84f2bbde5907a1548430_phone.svg" loading="lazy" alt="" class="phone-icon">069/6</a>
      </div>
        <div class="video-container">
          <video autoplay="" loop="" muted="" id="video-bg">
    
            <source src="http://bigcom.com/assets/2014/08/iChooseB.mp4" type="video/mp4">
          </video>
        </div>
    
    </div>
    </header>
    
    <div class="conteneur1">
    
     <div class="bloc1">
     <p>section1</p>
      <img src="image1.jpg"  >
    
     </div>
     
     <div class="bloc2">
     <p>section2</p>
      <img src="image2.jpg"  >
     </div>
     
      <div class="bloc3">
      <p>section3</p>
     <img src="image3.jpg"  >
     </div>
     
    </div>
    <div class="conteneur2">
    
     <div class="bloc4">
     <p>section1</p>
      <img src="image1.jpg"  >
    
     </div>
     
     <div class="bloc5">
     <p>section2</p>
      <img src="image2.jpg"  >
     </div>
     
      <div class="bloc6">
      <p>section3</p>
     <img src="image3.jpg"  >
     </div>
     
    </div>
    
    <!-- partial -->
      
    </body>
    </html>
    


    #video-bg{
      width:100%;
     }
    
    .header {
      display: flex;
      width:80%;
      text-align:center;
      margin: 0 auto;
     }
    
    .header-left {
      background: red;
      width:25%;
    display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .navigation {
       padding-top:30px;
      padding-bottom:30px;
      position:absolute;
      top:0;
      width:50%;
      z-index:1;
      flex: 1 1;
    }
    
    .header-right {
      background: green;
      width:25%;
     margin-top: 10px;
        justify-content: center;
    }
      #wrap{
          width: 50%; 
          height: 50px; 
          margin: 0;
          z-index: 99; 
          position: relative; 
       display: flex;
        align-items: center;
        justify-content: center;
             }
       
          .navbar{
          height: 50px;
          padding: 0;
          margin: 0;
          position: absolute; 
          }
       
          .navbar li{
          height: auto;
          width: 135.8px; 
          float: left;  
          text-align: center; 
          list-style: none;  
          font: normal bold 13px/1em Arial, Verdana, Helvetica;  
          padding: 0;
          margin: 0;
         
          }
          .navbar a{       
          padding: 18px 0;  
          border-left: 1px solid #ccc9c9;
          text-decoration: none; 
          color: white; 
          display: block;
          }
       
          .navbar li:hover, a:hover {
          background-color: #444444;
          } 
       
          .navbar li ul{
          display: none;
          height: auto;         
          margin: 0; 
          padding: 0; 
          }  
       
          .navbar li:hover ul{
          display: block;
          }
       
          .navbar li ul li {
          background-color: #444444;
          } 
       
          .navbar li ul li a{
          border-left: 1px solid #444444; 
          border-right: 1px solid #444444; 
          border-top: 1px solid #c9d4d8; 
          border-bottom: 1px solid #444444; 
          }
       
          .navbar li ul li a:hover{
          background-color: #a3a1a1;
          }
       
          .video-container {
      z-index: -100;
      width: 100%; 
      height:75%;
      overflow:hidden;
       position:absolute;
       top:0;
       left:0;
       }
    
    
    .navbar-logo1{
        font-family:Arial;
      font-size:30px;
      font-weight:bold;
      text-decoration:none;
      color:#fff; 
      padding:0px 10px 0px 10px;
    }
    .navbar-logo2{
        font-family:Arial;
      font-size:30px;
      font-weight:bold;
      text-decoration:none;
      color:#fff; 
      padding:0px 10px 0px 10px;
    }
    
    .social-link {
    margin-right:21px;
    }
      div.conteneur1 { 
     display: flex;
      width:80%;
      text-align:center;
      margin: 0 auto;
      padding: 650px 0px;
    background:#ccc;
    
    }
    
    
      div.conteneur2 { 
     display: flex;
      width:80%;
      text-align:center;
      margin: 0 auto;
      padding: 0px 0px;
    background:#ccc;}
    
      div.conteneurglobal { 
     display: flex;
      width:80%;
      text-align:center;
      margin: 0 auto;
      padding: 0px 0px;
    background:#ccc;}
    div.bloc1 { 
    
    padding:10px; /* aération interne des blocs */
    margin:0 10px; /* espacement horizontal entre les blocs */
    width:33%;
    border:1px solid #fff;
    display:inline-block;
    vertical-align:middle;
    text-align:center; /* on rétablit l'alignement du texte */ }
    
    div.bloc2 { 
    padding:10px; /* aération interne des blocs */
    margin:0 10px; /* espacement horizontal entre les blocs */
    width:33%;;
    border:1px solid #fff;
    display:inline-block;
    vertical-align:middle;
    text-align:center; /* on rétablit l'alignement du texte */ }
    
    div.bloc3 { 
    padding:10px; /* aération interne des blocs */
    margin:0 10px; /* espacement horizontal entre les blocs */
    width:33%;
    border:1px solid #fff;
    display:inline-block;
    vertical-align:middle;
    text-align:center; /* on rétablit l'alignement du texte */ }
    
    div.bloc4 { 
    
    padding:10px; /* aération interne des blocs */
    margin:0 10px; /* espacement horizontal entre les blocs */
    width:33%;
    border:1px solid #fff;
    display:inline-block;
    vertical-align:middle;
    text-align:center; /* on rétablit l'alignement du texte */ }
    
    div.bloc5 { 
    padding:10px; /* aération interne des blocs */
    margin:0 10px; /* espacement horizontal entre les blocs */
    width:33%;
    border:1px solid #fff;
    display:inline-block;
    vertical-align:middle;
    text-align:center; /* on rétablit l'alignement du texte */ }
    
    div.bloc6 { 
    padding:10px; /* aération interne des blocs */
    margin:0 10px; /* espacement horizontal entre les blocs */
    width:33%;
    border:1px solid #fff;
    display:inline-block;
    vertical-align:middle;
    text-align:center; /* on rétablit l'alignement du texte */ }