Проблемы с медиа -запросом [закрыто] ⇐ CSS

[Anonymous]

https://1drv.ms/i/c/9bc13fd6c50748fa/ef ... q?e=wmdz4y (оригинальное состояние)
https://onedrive.live.com/?qt=allmyphot ... 8283581d45 D191E3D78BF38E632A%3Fithint%3DPHOTO%26E%3DHWINVT%26MIGRATESPO%3DTRUE & SW = BYPASSCONFIG & CID = 9BC13FD6C50 748FA & ID = 9BC13FD6C50748FA%21S76518283581D45D191E3D78BF38E632A & SELEEAD = AHR0CHM6LY8XZHJ2LM1ZL2KVYY85MXM2 ZKNMM1MDC0OGZHL0VZT0NVWFLKV05GRMTLUFHPX09PWXLVQLFYTWPAUNLXVHC1RTNZX1J0DY1QAFE%5FZT1ID2LUVLQ & V = Photos
(Buggy State 1)
https://onedrive.live.com/?qt=allmyphot ... 8e3e5604f2 796C636D58CADA5FA%3Fithint%3DPHOTO%26E%3DRWMX23%26MIGRATESPO%3DTRUE & SW = BypassConfig & CID = 9BC13FD6C50 748FA & ID = 9BC13FD6C50748FA%21SBBDF88E3E5604F2796C636D58CADA5FA & SLEEP = AHR0CHM6LY8XZHJ2LM1ZL2KVYY85MMX M2zknmm1mdc0ogzhl0vlt0kzn3rnnvnkugxzwtixwxl0cgzvqlldmdetohj2b05ochjvbgncm0u1tee%5fzt1sd214mjm & v = фотографии (Buggy State 2). class = "Snippet-Code-CSS Lang-CSS PrettyPrint-override">

Код: Выделить всё

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, body {
height: 100%;
}

.center {
width: 1280px;
margin: 0 auto;
}

.header {
width: 100%;
height: 90px;
background-color: #212432;
}

.SiteLogo {
margin: 30px -100px;
height: 33px;
}

.container-banner {
width: 100%;
height: 650px;
background-image: url(../Assets/header_bg.png);
background-size: cover;
background-position: center;
}

.container-banner > .center {
height: 100%;
text-align: right;
}

.form {
padding: 15px;
display: inline-block;
height: calc(96% + 60px);
width: 400px;
position: relative;
bottom: 35px;
background-color: whitesmoke;
border: 10px solid rgba(204, 204, 204, 0.5);
background-clip: padding-box;
}

.form > h2 {
font-size: 22px;
color: rgba(27, 27, 27, 0.89);
text-align: left;
font-family: "Roboto", sans-serif;
font-optical-sizing: auto;
font-weight: 250;
font-style: normal;
font-variation-settings:
"wdth" 100;
}

.input-container {
margin-top: 20px;
}

.input-container > input[type=text] {
height: 55px;
width: 344px;
border: 1px solid black;
margin-top: 10px;
}

.input-container > span,.form p {
display:inline-block;
width: 100%;
text-align: left;
font-size: 20px;
color: #BBBBBB;
}

form > p {
text-align: left;
margin-top: 25px;
font-size: 19px;
}

.asterisco {
color: red;
}

.btn {
border: none;
margin-top: 50px;
margin-right: 30px;
width: 340px;
height: 70px;
font-size: 40px;
color: white;
background-color: #363A6D;
cursor: pointer;
}

form > input[type="submit"]:hover {
background-color: #323657;
}

.container-list {
float: left;
width: 619px;
height: 270px;
background-color: rgba( 33, 35, 67, 0.7);
margin-top: 150px;
text-align: left;
padding: 40px;
}

.container-banner ul {
list-style-position: inside;
}

.container-banner li {
margin-top: 18px;
}

.container-abtus {
text-align: center;
background-color: #DDDDDD;
padding: 40px 0;
padding-bottom: 50px;
}

.container-abtus h1 {
font-family: "Roboto", sans-serif;
font-optical-sizing: auto;
font-weight: 250;
font-style: normal;
font-variation-settings:
"wdth" 100;
}

.container-abtus p {
width: 1000px;
text-align: center;
font-family: "Roboto", sans-serif;
font-optical-sizing: auto;
font-weight: 250;
font-style: normal;
font-variation-settings:
"wdth" 100;
display: inline-block;
}

.arrow {
position: relative;
top: 80px;
left: 710px;
width: 64px;
height: 64px;
background-image: url('../Assets/arrow.png');
}

.section-overview h2 {
color: #462663;
text-align: center;
font-family: "Roboto", sans-serif;
font-optical-sizing: auto;
font-weight: 250;
font-style: normal;
font-variation-settings:
"wdth" 100;
text-align: center;
margin-top: 50px;
font-size: 30px;
}

.container-section {
margin-top: 40px;
}

.container-section {
text-align: center;
}

.Section-items {
margin-top: 130px;
float: left;
width: 33.3%;
padding: 30px;
}

.section-text p {
padding: 10px 25px;
font-family: "Roboto", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"wdth" 100;
}

.section-text h3 {
font-family: "Roboto", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-variation-settings:
"wdth" 100;
}

footer{
clear: both;
border: 4px solid #888888;
border-bottom: none;
border-left: none;
border-right: none;
padding: 30px 0;
}

footer >  p{
font-family: "Roboto", sans-serif;
font-optical-sizing: auto;
font-weight: 100;
font-style: normal;
font-variation-settings:
"wdth" 100;
text-align: center;
margin-top: 10px;
font-size: 20px;
}< /code>





[*]





 PROJECT // 01




[img]Styles projeto_01/Assets/logo.png[/img]





[list]
Lorem ipsum Dolor amet
[*]Lorem ipsum Dolor amet
[*]Lorem ipsum Dolor amet
[*]Lorem ipsum Dolor amet
[/list]

 Preencha o formulario para começar
o seu caminho para um webmaster!
 

Nome *



Email *



Numero de telefone *



* Campos Obrigatórios!










Lorem Ipsum.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Ex sapien vitae pellentesque sem placerat in id. Pretium tellus duis convallis tempus leo eu aenean. Urna tempor pulvinar vivamus fringilla lacus nec metus. Iaculis massa nisl malesuada lacinia integer nunc posuere. Semper vel class aptent taciti sociosqu ad litora. Conubia nostra inceptos himenaeos orci varius natoque penatibus. Dis parturient montes nascetur ridiculus mus donec rhoncus. Nulla molestie mattis scelerisque maximus eget fermentum odio. Purus est efficitur laoreet mauris pharetra vestibulum fusce.



 aprenda com quem está no mercado!



[img]Styles projeto_01/Assets/icon.png[/img]

 Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.




[img]Styles projeto_01/Assets/icon.png[/img]

 Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.




[img]Styles projeto_01/Assets/icon.png[/img]

 Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.





Todos os direitos reservados - Danki Code
Av. Lorem Ipsum, Silor domor 211 - Caxias do Sul RS

Подробнее здесь: https://stackoverflow.com/questions/796 ... edia-query