Отдельная кнопка загрузки файла от Div Parent Class "Container", форма ⇐ Html

[Anonymous]

html{
scroll-behavior: smooth;
}
body{
margin: 0;
padding: 0;
font-family: 'montserrat', 'verdana', 'sans-serif';
}
.menu-area{
position: fixed;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
background-color: rgba(224, 228, 231, 0.2);
width: 100%;
height: 70px;
z-index: 1;
}
.nav{
display: flex;
justify-content: right;
list-style: none;
margin-right: 15%;
}
.logo{
flex: 1 1 auto;
margin-left: 10%;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
font-size: 25px;
}
a{
margin: 15px;
color: #000;
text-decoration: none;
text-transform: uppercase;
}
#home{
position: relative;
background-color: yellow;
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
text-align: center;
}
#about{
background-color: orange;
}
#portfolio{
background-color: green;
}
#services{
background-color: cyan;
}
#contact{
position: relative;
background-color: blue;
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.container h1{
color: white;
padding-top: 10px;
text-align: center;
font-size: 60px;
font-family: 'montserrat', 'verdana', 'sans-serif';
}
.container input{
background-color: white;
width: 70%;
margin-left: 12%;
font-size: 20px;
padding: 16px 16px;
border-radius: 10px;
border-color: black;
margin-bottom: 20px;
}
.container form textarea{
background-color: white;
width: 70%;
margin-left: 12%;
font-size: 20px;
padding: 16px 16px;
border-radius: 10px;
border-color: black;
margin-bottom: 25px;
font-family: 'montserrat', 'verdana', 'sans-serif';
}
.container input :focus-within{
outline: none;
border-color: #5bd183;
border-width: 3px;
}

.container textarea :focus-within{
outline: none;
border-color: #5bd183;
border-width: 3px;
}

.container form button{
background-color: #5bd183;
border-radius: 20px;
border-color: black;
font-size: 22px;
padding: 10px 18px;
text-align: center;
display: flex;
margin: auto;
}
.container button:hover{
opacity: 80%;
cursor: pointer;
}

#home .content{
width: 100%;
}
#home .content h1{
font-size: 60px;
margin: 10px 0;
color: #fff;
}
#home .content p{
width: 50%;
margin: auto;
line-height: 1.6;
color: #fff;
}
#about, #portfolio, #services, #contact{
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
height: 100vh;
}
.content{
width: 80%;
height: 100%;
padding: 15% 0;
}
.content h1{
font-size: 30px;
text-transform: uppercase;
}
.content p{
font-size: 24px;
line-height: 50px;
}< /code>



Contact Form







Send Message



< /code>
< /div>
< /div>
< /p>
Я хочу, чтобы кнопка загрузки файла была отделена от моего родительского контейнера ". Я хочу иметь возможность стилизовать загрузку моего файла отдельно, и я хочу, чтобы он все еще находился в форме. Вы, ребята, знаете, как это должно выглядеть. Вот мой код прямо сейчас:
[мой код прямо сейчас (https://i.sstatic.net/yjvencnx.png)образно это работать.

Подробнее здесь: https://stackoverflow.com/questions/795 ... ainer-form