how can I have space between my word and div?-CodePudding

I have some logos and videos in an iframe. I'm trying to get a space between my logos and my 3D word so I have to get a space between my div logos and my div videos3D.

Here's my codepen : https://codepen.io/Softee/pen/eYeMNBZ

.logos_container {
  text-align: center;
  margin-left: 85px;
}

.logos_container h1 {
  margin-right: 100px;
  margin-bottom: 45px;
  font-size: 54px;
  color: #dba974;
}

.logos {
  float: left;
  margin-right: 20px;
  padding: 25px;
  width: 20%;
}

.logos img {
  border-radius: 5px;
  opacity: 0.8;
  width: 80%;
  cursor: pointer;
}

.logos img:hover {
  opacity: 1;
}


/*-----------3D-----------*/

.logos3d_container {
  text-align: center;
  margin-left: 25px;
  margin-top: 150px;
}

.logos3d_container h1 {
  margin-right: 100px;
  margin-bottom: 45px;
  font-size: 54px;
  color: #dba974;
}

.logos3d_img {
  float: left;
  margin-right: 20px;
  padding: 25px;
  width: 29.4%;
}

.logos3d_img iframe {
  border-radius: 5px;
  opacity: 0.8;
  width: 100%;
}

.logos3d_img iframe:hover {
  opacity: 1;
}

<div  id="portfolio">
  <h1>LOGOS</h1>
  <div >
    <img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 1">
  </div>
  <div >
    <img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 2">
  </div>
  <div >
    <img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 3">
  </div>
  <div >
    <img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 4">
  </div>
  <div >
    <img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 5">
  </div>
  <div >
    <img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 6">
  </div>
  <div >
    <img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 7">
  </div>
  <div >
    <img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 8">
  </div>
</div>

<div  id="portfolio">
  <h1>3D</h1>
  <div >
    <iframe width="560" height="315" src="https://www.youtube.com/embed/gcH-IaC0150" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div >
    <iframe width="560" height="315" src="https://www.youtube.com/embed/gcH-IaC0150" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div >
    <iframe width="560" height="315" src="https://www.youtube.com/embed/gcH-IaC0150" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

CodePudding user response：

Here goes HTML

<div >
          <div  id="portfolio">
            <h1>LOGOS</h1>
          <div >
            <img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 1">
          </div>
          <div >
            <img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 2">
          </div>
          <div >
            <img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 3">
          </div>
          <div >
            <img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 4">
          </div>
            <div >
            <img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 5">
          </div>
          <div >
            <img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 6">
          </div>
          <div >
            <img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 7">
          </div>
          <div >
            <img src="https://media.cdnws.com/_i/50025/2/797/2/500x500.jpeg.webp" alt="Logo 8">
          </div>
        </div>
        
        <div  id="portfolio">
            <h1>3D</h1>
          <div >
            <iframe width="560" height="315" src="https://www.youtube.com/embed/gcH-IaC0150" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </div>  
          <div >
            <iframe width="560" height="315" src="https://www.youtube.com/embed/gcH-IaC0150" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </div>  
          <div >
            <iframe width="560" height="315" src="https://www.youtube.com/embed/gcH-IaC0150" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </div>
        </div>
        </div>

Here is CSS

.logos_container{
    text-align: center;
    margin-left: 85px;
 
}

.logos_container h1{
    margin-right: 100px;
    margin-bottom: 45px;
    font-size: 54px;
    color: #dba974;
}

.logos {
    float: left;
    margin-right: 20px;
    padding: 25px;
    width: 20%;
}

.logos img {
    border-radius: 5px;
    opacity: 0.8;
    width: 80%;
    cursor: pointer;
}

.logos img:hover {
    opacity: 1;
}

/*-----------3D-----------*/

.logos3d_container{
    text-align: center; 
    margin-left: 25px;
  margin-top: 23px; /* add your required margin */
}

.logos3d_container h1{
    margin-right: 100px;
    font-size: 54px;
    color: #dba974;
}

.logos3d_img {
    float: left;
    margin-right: 20px;
    padding: 25px;
    width: 29.4%;
}

.logos3d_img iframe {
    border-radius: 5px;
    opacity: 0.8;
    width: 100%;
}

.logos3d_img iframe:hover {
    opacity: 1;
}

.container{
  display:flex;
  flex-direction: column;
}

I have added flexbox to main container and added both div in that container. So that they will have equal space. Flex box direction is column and now you can give margin-top to "logos3d_container" which will give you in between space.