Positioning of the youtube video-CodePudding

So I wanted to place this youtube video like in this picture in the red rectangle but none of my ideas work, every time the video is in the weird place. Could someone help? (Adjust the size of the video window) [ adding random words because post need some more description because it's mostly code, hey how is your day going]

body {
    margin: 0;
    height: 100vh;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1.3fr;
    grid-template-rows: 0.4fr 4fr 3fr 0.6fr;
    grid-template-areas:
    "header main main"
    "lmain main main"
    "lmain below below"
    "footer footer footer";
    height: 100vh;
}


main {
    grid-area: main;
    background: #FFFADF;
}   

section.below {
    grid-area: below;
    background: #C4B35A;
}


section.footer {
    grid-area: footer;
    background: #615e5e;
}

header {
    grid-area: header;
    background: rgb(198, 250, 239);
}
.lmain {
    grid-area: lmain;
    background: rgb(233, 112, 112);
    background-size: cover;
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #486cad;
}
li{
    float: left;
}
li a{
    display: block;
    color: white;
    text-align: center;
    padding: 16px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: #95b8d1;
}

#main-text{
    font-family:sans-serif;
    font-weight: 550;
    font-size: 17px;
    text-align: center;
}

#quote{
    font-family:sans-serif;
    font-size: 18px;
    text-align: center;
}
#author{
    font-family:sans-serif;
    margin-right: 10px;
    font-size: 10px;
    text-align: center;
}
.text-box hr{
    width: 20%;
    height: 1px;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), to(transparent), color-stop(50%, black));
    border: none;
}
.box{
    margin-left: 37px;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 80%;
    background-color: white;
    border: 1px solid rgba(59, 58, 58, 0.46);
    border-radius: 5px;
    box-shadow: -2px 2px 7px gray;
}
main h1{
    font-family: sans-serif;
    padding-left: 40px;
    padding-top: 40px;
    font-weight: 700;
}
main h6{
    font-family: sans-serif;
    padding-left: 40px;
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
}

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>the title idk</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div >
        <header>
            
        </header>   
        <main>
            <div id="description">
                <h1>Man's<br>
                    best<br>
                    friend
                </h1>
                <h6>Pies towarzyszy człowiekowi od tysięcy lat i trudno dziś wyobrazić sobie,<br> 
                    by mogło być inaczej. Popularne stwierdzenie „pies najlepszym przyjacielem <br> 
                    człowieka” nie jest tylko pustym sloganem – psy to naprawdę niezrównani <br> 
                    przyjaciele, którzy nigdy nie zawodzą i zostają przy Tobie na zawsze. <br> 
                    Jeśli masz psa, nie musimy Ci tego zresztą tłumaczyć – to się po prostu <br> 
                    czuje. Jeśli zaś dopiero zastanawiasz się nad przygarnięciem pod swój <br> 
                    dach czworonożnego kumpla, nie wahaj się. Na filmie przedstawiliśmy <br> 
                    kilka powodów, dlaczego pies jest najlepszym przyjacielem człowieka! 
                </h6>
                </div>
            <div >
            <iframe width="411" height="161" src="https://www.youtube.com/embed/3LzNQY3aT4c" title="YouTube video player"
             frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen></iframe>
            </div>
        </main>
        <section >
            
        </section>
        
        <section >
            footer
        </section>
        <div >
            
        </div>
       
        

    </div>

</body>
</html>

CodePudding user response：

I wraped your content (h1,content, commercial) in a container which i assign with flex box.

body {
    margin: 0;
    height: 100vh;
}



.grid-container {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1.3fr;
    grid-template-rows: 0.4fr 4fr 3fr 0.6fr;
    grid-template-areas:
    "header main main"
    "lmain main main"
    "lmain below below"
    "footer footer footer";
    height: 100vh;
}


main {
    grid-area: main;
    background: #FFFADF;
  
}   
.flexi {
  display:flex;
}
.commercial {
  margin-top:40px;
  padding-left:40px;
}

section.below {
    grid-area: below;
    background: #C4B35A;
}


section.footer {
    grid-area: footer;
    background: #615e5e;
}

xheader {
    grid-area: header;
    background: rgb(198, 250, 239);
}
.lmain {
    grid-area: lmain;
    background: rgb(233, 112, 112);
    background-size: cover;
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #486cad;
}
li{
    float: left;
}
li a{
    display: block;
    color: white;
    text-align: center;
    padding: 16px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: #95b8d1;
}

#main-text{
    font-family:sans-serif;
    font-weight: 550;
    font-size: 17px;
    text-align: center;
}

#quote{
    font-family:sans-serif;
    font-size: 18px;
    text-align: center;
}
#author{
    font-family:sans-serif;
    margin-right: 10px;
    font-size: 10px;
    text-align: center;
}
.text-box hr{
    width: 20%;
    height: 1px;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), to(transparent), color-stop(50%, black));
    border: none;
}
.box{
    margin-left: 37px;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 80%;
    background-color: white;
    border: 1px solid rgba(59, 58, 58, 0.46);
    border-radius: 5px;
    box-shadow: -2px 2px 7px gray;
}
main h1{
    font-family: sans-serif;
    padding-left: 40px;
    padding-top: 40px;
    font-weight: 700;
}
main h6{
    font-family: sans-serif;
    padding-left: 40px;
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
}

<div id="container">
  <header>

  </header>   
  <main>
    
  </main>
</div>
    <div >
        <header>
            
        </header>   
        <main>
          <div >
            <div id="description">
                <h1>Man's<br>
                    best<br>
                    friend
                </h1>
                <h6>Pies towarzyszy człowiekowi od tysięcy lat i trudno dziś wyobrazić sobie,<br> 
                    by mogło być inaczej. Popularne stwierdzenie „pies najlepszym przyjacielem <br> 
                    człowieka” nie jest tylko pustym sloganem – psy to naprawdę niezrównani <br> 
                    przyjaciele, którzy nigdy nie zawodzą i zostają przy Tobie na zawsze. <br> 
                    Jeśli masz psa, nie musimy Ci tego zresztą tłumaczyć – to się po prostu <br> 
                    czuje. Jeśli zaś dopiero zastanawiasz się nad przygarnięciem pod swój <br> 
                    dach czworonożnego kumpla, nie wahaj się. Na filmie przedstawiliśmy <br> 
                    kilka powodów, dlaczego pies jest najlepszym przyjacielem człowieka! 
                </h6>
                </div>
            <div >
             <iframe width="411px" height="261px" src="https://www.youtube.com/embed/3LzNQY3aT4c" title="YouTube video player"
             frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen></iframe>
            </div>
          </div>
        </main>
        <section >
            
        </section>
        
        <section >
            footer
        </section>
        <div >
            
        </div>
       
        

    </div>

CodePudding user response：

Add a float and a width to your description and commercial div.

Example that works in your code:

body {
    margin: 0;
    height: 100vh;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1.3fr;
    grid-template-rows: 0.4fr 4fr 3fr 0.6fr;
    grid-template-areas:
    "header main main"
    "lmain main main"
    "lmain below below"
    "footer footer footer";
    height: 100vh;
}


main {
    grid-area: main;
    background: #FFFADF;
}   

section.below {
    grid-area: below;
    background: #C4B35A;
}


section.footer {
    grid-area: footer;
    background: #615e5e;
}

header {
    grid-area: header;
    background: rgb(198, 250, 239);
}
.lmain {
    grid-area: lmain;
    background: rgb(233, 112, 112);
    background-size: cover;
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #486cad;
}
li{
    float: left;
}
li a{
    display: block;
    color: white;
    text-align: center;
    padding: 16px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: #95b8d1;
}

#main-text{
    font-family:sans-serif;
    font-weight: 550;
    font-size: 17px;
    text-align: center;
}

#quote{
    font-family:sans-serif;
    font-size: 18px;
    text-align: center;
}
#author{
    font-family:sans-serif;
    margin-right: 10px;
    font-size: 10px;
    text-align: center;
}
.text-box hr{
    width: 20%;
    height: 1px;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), to(transparent), color-stop(50%, black));
    border: none;
}
.box{
    margin-left: 37px;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 80%;
    background-color: white;
    border: 1px solid rgba(59, 58, 58, 0.46);
    border-radius: 5px;
    box-shadow: -2px 2px 7px gray;
}
main h1{
    font-family: sans-serif;
    padding-left: 40px;
    padding-top: 40px;
    font-weight: 700;
}
main h6{
    font-family: sans-serif;
    padding-left: 40px;
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
}

#description {
  float: left;
  width: 50%;
}

.commercial {
  float: right;
  width: 50%;
}

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>the title idk</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div >
        <header>
            
        </header>   
        <main>
            <div id="description">
                <h1>Man's<br>
                    best<br>
                    friend
                </h1>
                <h6>Pies towarzyszy człowiekowi od tysięcy lat i trudno dziś wyobrazić sobie,<br> 
                    by mogło być inaczej. Popularne stwierdzenie „pies najlepszym przyjacielem <br> 
                    człowieka” nie jest tylko pustym sloganem – psy to naprawdę niezrównani <br> 
                    przyjaciele, którzy nigdy nie zawodzą i zostają przy Tobie na zawsze. <br> 
                    Jeśli masz psa, nie musimy Ci tego zresztą tłumaczyć – to się po prostu <br> 
                    czuje. Jeśli zaś dopiero zastanawiasz się nad przygarnięciem pod swój <br> 
                    dach czworonożnego kumpla, nie wahaj się. Na filmie przedstawiliśmy <br> 
                    kilka powodów, dlaczego pies jest najlepszym przyjacielem człowieka! 
                </h6>
                </div>
            <div >
            <br><br><br>
            <iframe width="411" height="161" src="https://www.youtube.com/embed/3LzNQY3aT4c" title="YouTube video player"
             frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen></iframe>
            </div>
        </main>
        <section >
            
        </section>
        
        <section >
            footer
        </section>
        <div >
            
        </div>
       
        

    </div>

</body>
</html>