如何在弹性布局中删除空格

Question

/* Master styles */

html, body {
    font-family: "Lato", sans-serif;
    margin: 0px;
    height: 100%;
    width: 100%;
    padding: 0px;
    overflow-x: hidden;
}

.boxcontent {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: 100vh;
}

.box {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: left;
    align-items: left;
    margin: 10px;
    transition: 0.5s;
}

.box:hover {
    height: 400px;

}

.box  .imgBx{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.box .imgBx img {
    max-width: 100%;
    opacity: 0.1;
    transition: 0.5s;
}

.box:hover .imgBx img{
    opacity: 1;
}

.box::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
   
    z-index: -1;
}

.box::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -2;
    filter: blur(40px);
    background: #060C21;
}

.box:before,
.box::after 
{
    background-image: linear-gradient(235deg,#89ff00,#010615,#00bcd4);
}

.box:nth-child(2) before,
.box::nth-child(2) after 
{
    background-image: linear-gradient(235deg,#ff005e,#010615,#fbff00);
}

.box:nth-child(3) before,
.box::nth-child(3) after 
{
    background-image: linear-gradient(235deg,#772aff,#010615,#2196f3);
}

.box .content {
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 90px;
    background: rgba(red, green, blue, alpha);
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    opacity: 0;
    transition: 0.5s;
    
}

.box:hover .content
{
 opacity: 1;
}

.box .content h2
{
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 1px;
}

header {
    background-color: crimson;
    height: 66px;
}

header .logo {
    float: left;
    padding-top: 10px;
    height: inherit;
    font-weight: bolder;
    margin-left: 2em;
 
    
}

header ul {
    float: right;
    margin: 0px;
    padding: 0px;
    list-style: none;
}

header * {
    color: white;
}
header .logo-text {
    font-weight: bolder;
    font-size: xx-large;
    font-family: 'Candal', serif;
}

header ul li {
    float: left;
}

header ul li a {
    display: block;
    padding: 21px;
    font-size: 1.1em;
    text-decoration: none;
    font-family: 'Candal', serif;
}

header ul li a:hover {
    background: rgb(116, 5, 27);
    transition: 0.5s
}



    /* Bottom footer syles */
.footer {
    background: #303036;
    color: #d3d3d3;
    height: 400px;
    position: absolute;
    
}

.footer .footer-bottom {
    background: #343a40;
    color: white;
    height: 50px;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding-top: 20px;
 
}
.footer .footer-content {
    height: 350px;
    display:flex
}

.footer .footer-content .footer-section {
    flex: 1;
    padding: 25px;
}

.footer .footer-content .about h1 span {
    color: crimson;
    font-weight: bolder;
    font-size: 1.3em;
}

.footer .footer-content h1,
.footer .footer-content h2 {
    color: white;
}

.footer .footer-content .about .contact span {
    display: block;
    font-size: 1.1em;
    font-weight: bolder;
    margin-bottom: 8px;
}
.footer .footer-content .links ul a {
    display: block;
    margin-bottom: 10px;
    font-size: 1.2em;
    color: white;
}

.footer .footer-content .links ul a:hover{
    color: white;
    margin-left: 15px;
    transition: all .3s;
}

.footer .footer-content .contact-form .contact-input {
    background: #272727;
    color: #bebdbd;
    margin-bottom: 10px;
    line-height: 1.5rem;
    padding: .9rem 1.4rem;
    border: none;
    display: block;
}
.footer .footer-content .contact-form .contact-input:focus {
    background: #1a1a1a;
}
.btn-big {
    padding: .7rem 1.3rem;
    line-height: 1.3rem;
    background-color: #006669;
    border:none;
    font-weight: bolder;
    font-size: medium;
    color: white;
}




  @media only screen and (max-width: 934px) {
      .footer {
          height: auto;
      }
      .footer .footer-content {
          height: auto;
          flex-direction: column;
      }
      .footer .footer-content .contact-form {
          padding-bottom: 90px;
      }
      .boxcontent {
          height: auto;
          width: auto;
          flex-direction: column;
      }
  }

  @media only screen and (max-width: 750){
    .footer {
        height: auto;
    }
    .footer .footer-content {
        height: auto;
        flex-direction: column;
    }
    .footer .footer-content .contact-form {
        padding-bottom: 90px;
    }
    .boxcontent {
        height: auto;
        width: auto;
        flex-direction: column;
    }
}
  }

<html lang="eng">
    <head>
        <meta charset="utf-8" />
        <title>Pagel</title>
        <meta name="viewpoint" content="width=device-width, initial-scale=1">
        <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap" rel="stylesheet">
    
        <!-- Google font -->
        <link href="https://fonts.googleapis.com/css2?family=Candal&display=swap" rel="stylesheet">
    </head>
    
    <body>
        <header>
            <div class="logo">
                <div class="logo-text"><span>Pagel</span>Romania</div>
            </div>
            <ul class="nav">
                <li><a href="#">Acasa</a></li>
                <li><a href="#">Despre Noi</a></li>
                <li><a href="#">Produse</a></li>
            </ul>
        </header>
     <div class="boxcontent">
        <div class="box">
            <div class="imgBx">
                <img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">
            </div>
            <div class="content">
                <h2>Mortar de subturnare</h2>
            </div>
        </div>
        <div class="box">
            <div class="imgBx">
                <img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">
            </div>
            <div class="content">
                <h2>Mortar de subturnare</h2>
            </div>
        </div>
        <div class="box">
            <div class="imgBx">
                <img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">
            </div>
            <div class="content">
                <h2>Mortar de subturnare</h2>
            </div>
        </div>
        <div class="box">
            <div class="imgBx">
                <img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">
            </div>
            <div class="content">
                <h2>Mortar de subturnare</h2>
            </div>
        </div>
        <div class="box">
            <div class="imgBx">
                <img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">
            </div>
            <div class="content">
                <h2>Mortar de subturnare</h2>
            </div>
        </div>
    </div>
    
    
        <!-- Bottom footer -->
        <div class="footer">
            <div class="footer-content">
                <div class="footer-section about">
                    <h1 class="brand"><span>Pagel</span> Romania</h1>
                    <p>De peste 40 de ani firma PAGEL SPEZIAL-BETON GmbH & Co. KG din Essen, a contribuit în mod hotărîtor 
                    la dezvoltarea şi perfecţionarea mortarelor de subturnare, precum şi a altor mortare speciale.</p>
                    <div class="contact">
                        <span>&#9742; &nbsp; 0762-837-458</span>
                        <br>
                        <span>&#9993; &nbsp; [email protected]</span>
                    </div>
                    <div class="socials">
                        <a href="#"><i class="fab fa-facebook"></i></a>
                        <a href="#"><i class="fab fa-linkedin"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-youtube"></i></a>
    
                    </div>
                </div>
                <div class="footer-section links">
                <h2>Link-uri rapide</h2>
                <br/>
                <ul>
                
                    <a href="#">
                        <li>Conditii generale</li></a>
                    <a href="#">
                        <li>Politica de confidentialitate</li>
                    </a>
                    <a href="#">
                        <li>Linkuri</li>
                    </a>
                    <a href="#">
                        <li>Despre noi</li>
                    </a>
                    <a href="#">
                        <li>Notificari site</li>
                    </a>
                    <a href="#">
                        <li>Home</li>
                    </a>
                </ul>
                </div>
                <div class="footer-section contact-form">
                    <h2>Contactati-ne</h2>
                    <br>
                    <form action="index.html" method="POST">
                    <input type="email" name="email" class="text-input contact-input" placeholder="Adresa dvs. de email">
                    <textarea name="mesaj" class="text-input contact-input" placeholder="Mesajul dvs."></textarea> 
                    <button type="submit" class="btn btn-big">
                        <i class="fas fa-envelope">
                        </i>
                        Trimiteti
                    </button>
                    </form>
                </div>
    
            </div>
            <div class="footer-bottom">
                &copy; pagel.ro ┃ Design by Toma Dragos
            </div>
    
    
        </div>
    
    </body>
    
    </html>

我想删除徽标下方最左侧的.boxcontent中的空白。我该怎么做呢？这是我第一次尝试建立网站。

以及如何使我的.boxcontent对所有平台都具有响应能力。对于页脚，我设法用@media找到解决方案，但是当我在.boxcontent上尝试相同的操作时，在移动设备上看起来效果不佳。

谢谢！

Answer 1

clear: left;无法正确解决您的问题。

您使用flexbox，但是某些flexbox属性错误。 overflow在移动设备中造成问题。您必须从overflow-x: hidden;保留默认值中删除html,boy。 flex-wrap: 100vh;错误，应将flex-wrap: wrap | nowrap;读取为flex-wrap。 justify-content: left;左边是错误的，应该是justify-content: flex-start | flex-end | center | stretch | space-between | space-around | space-evenly;其他值left right, start and end的浏览器支持问题为justify-content。与align-items相同，读取为align-items。我修复了响应式CSS问题。 .boxcontent宽度也将是100%。

您已阅读flexbox。

此处为修改的CSS

/* Master styles */

html, body {
    font-family: "Lato", sans-serif;
    margin: 0px;
    height: 100%;
    width: 100%;
    padding: 0px;
}

.boxcontent {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.box {
    position: relative;
    flex-basis: calc(20% - 20px);
    flex-grow: 0;
    flex-shrink: 0;
    max-width: calc(20% - 20px);
    height: 300px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 10px;
    transition: 0.5s;
}

@media (max-width: 767px){
  .box{
    flex-basis: calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}
@media (max-width: 575px){
  .box{
    flex-basis: calc(100% - 20px);
    max-width: calc(100% - 20px);
  }
}

.box:hover {
    height: 400px;

}

.box  .imgBx{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.box .imgBx img {
    max-width: 100%;
    opacity: 0.1;
    transition: 0.5s;
}

.box:hover .imgBx img{
    opacity: 1;
}

.box::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;

    z-index: -1;
}

.box::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -2;
    filter: blur(40px);
    background: #060C21;
}

.box:before,
.box::after 
{
    background-image: linear-gradient(235deg,#89ff00,#010615,#00bcd4);
}

.box:nth-child(2) before,
.box::nth-child(2) after 
{
    background-image: linear-gradient(235deg,#ff005e,#010615,#fbff00);
}

.box:nth-child(3) before,
.box::nth-child(3) after 
{
    background-image: linear-gradient(235deg,#772aff,#010615,#2196f3);
}

.box .content {
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 90px;
    background: rgba(red, green, blue, alpha);
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    opacity: 0;
    transition: 0.5s;

}

.box:hover .content
{
 opacity: 1;
}

.box .content h2
{
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 1px;
}

header {
    background-color: crimson;
    height: 66px;
}

header .logo {
    float: left;
    padding-top: 10px;
    height: inherit;
    font-weight: bolder;
    margin-left: 2em;


}

header ul {
    float: right;
    margin: 0px;
    padding: 0px;
    list-style: none;
}

header * {
    color: white;
}
header .logo-text {
    font-weight: bolder;
    font-size: xx-large;
    font-family: 'Candal', serif;
}

header ul li {
    float: left;
}

header ul li a {
    display: block;
    padding: 21px;
    font-size: 1.1em;
    text-decoration: none;
    font-family: 'Candal', serif;
}

header ul li a:hover {
    background: rgb(116, 5, 27);
    transition: 0.5s
}



    /* Bottom footer syles */
.footer {
    background: #303036;
    color: #d3d3d3;
    height: 400px;
    position: absolute;

}

.footer .footer-bottom {
    background: #343a40;
    color: white;
    height: 50px;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding-top: 20px;

}
.footer .footer-content {
    height: 350px;
    display:flex
}

.footer .footer-content .footer-section {
    flex: 1;
    padding: 25px;
}

.footer .footer-content .about h1 span {
    color: crimson;
    font-weight: bolder;
    font-size: 1.3em;
}

.footer .footer-content h1,
.footer .footer-content h2 {
    color: white;
}

.footer .footer-content .about .contact span {
    display: block;
    font-size: 1.1em;
    font-weight: bolder;
    margin-bottom: 8px;
}
.footer .footer-content .links ul a {
    display: block;
    margin-bottom: 10px;
    font-size: 1.2em;
    color: white;
}

.footer .footer-content .links ul a:hover{
    color: white;
    margin-left: 15px;
    transition: all .3s;
}

.footer .footer-content .contact-form .contact-input {
    background: #272727;
    color: #bebdbd;
    margin-bottom: 10px;
    line-height: 1.5rem;
    padding: .9rem 1.4rem;
    border: none;
    display: block;
}
.footer .footer-content .contact-form .contact-input:focus {
    background: #1a1a1a;
}
.btn-big {
    padding: .7rem 1.3rem;
    line-height: 1.3rem;
    background-color: #006669;
    border:none;
    font-weight: bolder;
    font-size: medium;
    color: white;
}




  @media only screen and (max-width: 934px) {
      .footer {
          height: auto;
      }
      .footer .footer-content {
          height: auto;
          flex-direction: column;
      }
      .footer .footer-content .contact-form {
          padding-bottom: 90px;
      }
      .boxcontent {
          height: auto;
      }
  }

  @media only screen and (max-width: 750){
    .footer {
        height: auto;
    }
    .footer .footer-content {
        height: auto;
        flex-direction: column;
    }
    .footer .footer-content .contact-form {
        padding-bottom: 90px;
    }
    .boxcontent {
        height: auto;
    }
}

摘录在下面

/* Master styles */

html, body {
    font-family: "Lato", sans-serif;
    margin: 0px;
    height: 100%;
    width: 100%;
    padding: 0px;
}

.boxcontent {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.box {
    position: relative;
    flex-basis: calc(20% - 20px);
    flex-grow: 0;
    flex-shrink: 0;
    max-width: calc(20% - 20px);
    height: 300px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 10px;
    transition: 0.5s;
}

@media (max-width: 767px){
  .box{
    flex-basis: calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}
@media (max-width: 575px){
  .box{
    flex-basis: calc(100% - 20px);
    max-width: calc(100% - 20px);
  }
}

.box:hover {
    height: 400px;

}

.box  .imgBx{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.box .imgBx img {
    max-width: 100%;
    opacity: 0.1;
    transition: 0.5s;
}

.box:hover .imgBx img{
    opacity: 1;
}

.box::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
   
    z-index: -1;
}

.box::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -2;
    filter: blur(40px);
    background: #060C21;
}

.box:before,
.box::after 
{
    background-image: linear-gradient(235deg,#89ff00,#010615,#00bcd4);
}

.box:nth-child(2) before,
.box::nth-child(2) after 
{
    background-image: linear-gradient(235deg,#ff005e,#010615,#fbff00);
}

.box:nth-child(3) before,
.box::nth-child(3) after 
{
    background-image: linear-gradient(235deg,#772aff,#010615,#2196f3);
}

.box .content {
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 90px;
    background: rgba(red, green, blue, alpha);
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    opacity: 0;
    transition: 0.5s;
    
}

.box:hover .content
{
 opacity: 1;
}

.box .content h2
{
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 1px;
}

header {
    background-color: crimson;
    height: 66px;
}

header .logo {
    float: left;
    padding-top: 10px;
    height: inherit;
    font-weight: bolder;
    margin-left: 2em;
 
    
}

header ul {
    float: right;
    margin: 0px;
    padding: 0px;
    list-style: none;
}

header * {
    color: white;
}
header .logo-text {
    font-weight: bolder;
    font-size: xx-large;
    font-family: 'Candal', serif;
}

header ul li {
    float: left;
}

header ul li a {
    display: block;
    padding: 21px;
    font-size: 1.1em;
    text-decoration: none;
    font-family: 'Candal', serif;
}

header ul li a:hover {
    background: rgb(116, 5, 27);
    transition: 0.5s
}



    /* Bottom footer syles */
.footer {
    background: #303036;
    color: #d3d3d3;
    height: 400px;
    position: absolute;
    
}

.footer .footer-bottom {
    background: #343a40;
    color: white;
    height: 50px;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding-top: 20px;
 
}
.footer .footer-content {
    height: 350px;
    display:flex
}

.footer .footer-content .footer-section {
    flex: 1;
    padding: 25px;
}

.footer .footer-content .about h1 span {
    color: crimson;
    font-weight: bolder;
    font-size: 1.3em;
}

.footer .footer-content h1,
.footer .footer-content h2 {
    color: white;
}

.footer .footer-content .about .contact span {
    display: block;
    font-size: 1.1em;
    font-weight: bolder;
    margin-bottom: 8px;
}
.footer .footer-content .links ul a {
    display: block;
    margin-bottom: 10px;
    font-size: 1.2em;
    color: white;
}

.footer .footer-content .links ul a:hover{
    color: white;
    margin-left: 15px;
    transition: all .3s;
}

.footer .footer-content .contact-form .contact-input {
    background: #272727;
    color: #bebdbd;
    margin-bottom: 10px;
    line-height: 1.5rem;
    padding: .9rem 1.4rem;
    border: none;
    display: block;
}
.footer .footer-content .contact-form .contact-input:focus {
    background: #1a1a1a;
}
.btn-big {
    padding: .7rem 1.3rem;
    line-height: 1.3rem;
    background-color: #006669;
    border:none;
    font-weight: bolder;
    font-size: medium;
    color: white;
}




  @media only screen and (max-width: 934px) {
      .footer {
          height: auto;
      }
      .footer .footer-content {
          height: auto;
          flex-direction: column;
      }
      .footer .footer-content .contact-form {
          padding-bottom: 90px;
      }
      .boxcontent {
          height: auto;
      }
  }

  @media only screen and (max-width: 750){
    .footer {
        height: auto;
    }
    .footer .footer-content {
        height: auto;
        flex-direction: column;
    }
    .footer .footer-content .contact-form {
        padding-bottom: 90px;
    }
    .boxcontent {
        height: auto;
    }
}

<html lang="eng">

<head>
    <meta charset="utf-8" />
    <title>Pagel</title>
    <meta name="viewpoint" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap" rel="stylesheet">

    <!-- Google font -->
    <link href="https://fonts.googleapis.com/css2?family=Candal&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <div class="logo">
            <div class="logo-text"><span>Pagel</span>Romania</div>
        </div>
        <ul class="nav">
            <li><a href="#">Acasa</a></li>
            <li><a href="#">Despre Noi</a></li>
            <li><a href="#">Produse</a></li>
        </ul>
    </header>
 <div class="boxcontent">
    <div class="box">
        <div class="imgBx">
            <img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">
        </div>
        <div class="content">
            <h2>Mortar de subturnare</h2>
        </div>
    </div>
    <div class="box">
        <div class="imgBx">
            <img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">
        </div>
        <div class="content">
            <h2>Mortar de subturnare</h2>
        </div>
    </div>
    <div class="box">
        <div class="imgBx">
            <img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">
        </div>
        <div class="content">
            <h2>Mortar de subturnare</h2>
        </div>
    </div>
    <div class="box">
        <div class="imgBx">
            <img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">
        </div>
        <div class="content">
            <h2>Mortar de subturnare</h2>
        </div>
    </div>
    <div class="box">
        <div class="imgBx">
            <img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">
        </div>
        <div class="content">
            <h2>Mortar de subturnare</h2>
        </div>
    </div>
</div>


    <!-- Bottom footer -->
    <div class="footer">
        <div class="footer-content">
            <div class="footer-section about">
                <h1 class="brand"><span>Pagel</span> Romania</h1>
                <p>De peste 40 de ani firma PAGEL SPEZIAL-BETON GmbH & Co. KG din Essen, a contribuit în mod hotărîtor 
                la dezvoltarea şi perfecţionarea mortarelor de subturnare, precum şi a altor mortare speciale.</p>
                <div class="contact">
                    <span>&#9742; &nbsp; 0762-837-458</span>
                    <br>
                    <span>&#9993; &nbsp; [email protected]</span>
                </div>
                <div class="socials">
                    <a href="#"><i class="fab fa-facebook"></i></a>
                    <a href="#"><i class="fab fa-linkedin"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>

                </div>
            </div>
            <div class="footer-section links">
            <h2>Link-uri rapide</h2>
            <br/>
            <ul>
            
                <a href="#">
                    <li>Conditii generale</li></a>
                <a href="#">
                    <li>Politica de confidentialitate</li>
                </a>
                <a href="#">
                    <li>Linkuri</li>
                </a>
                <a href="#">
                    <li>Despre noi</li>
                </a>
                <a href="#">
                    <li>Notificari site</li>
                </a>
                <a href="#">
                    <li>Home</li>
                </a>
            </ul>
            </div>
            <div class="footer-section contact-form">
                <h2>Contactati-ne</h2>
                <br>
                <form action="index.html" method="POST">
                <input type="email" name="email" class="text-input contact-input" placeholder="Adresa dvs. de email">
                <textarea name="mesaj" class="text-input contact-input" placeholder="Mesajul dvs."></textarea> 
                <button type="submit" class="btn btn-big">
                    <i class="fas fa-envelope">
                    </i>
                    Trimiteti
                </button>
                </form>
            </div>

        </div>
        <div class="footer-bottom">
            &copy; pagel.ro ┃ Design by Toma Dragos
        </div>


    </div>

</body>
<script>
    const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper')

    portfolioItems.forEach(portfolioItem => {
         portfolioItem.addEventListener('mouseover', () => {
              portfolioItem.childNodes[1].classList.add('img-darken');
         })
         portfolioItem.addEventListener('mouseout', () => {
              portfolioItem.childNodes[1].classList.remove('img-darken');
         })

    })
</script>
</html>

Answer 2

放入

clear:left;

在您的CSS类.boxcontent中。