Почему мое заполнение CSS Grid и размер изображения неверны в больших окнах просмотра в Google Chrome? [закрыто] ⇐ Html

[Anonymous]

Мой код работает в Firefox и Safari. В Chrome мои отступы работают только слева и справа, отступы между верхним и нижним разделами неправильные. Контейнер изображений выглядит слишком большим.На маленьких устройствах это работает, потому что я там не использую сетки. Но если вы увеличите область просмотра/браузера более чем на 768 пикселей, изображения станут слишком большими, и отступы не будут работать.

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

/*******************************************
main.css
*******************************************/
* {
margin: 0;
padding: 0;
text-decoration: none;
font-size: 20px; }

li {
list-style-type: none; }

/*******************************************
COLORS / LINKS
*******************************************/
:root {
--primary: #00a2ff;
--secondary: #151515; }

a:link {
color: #fff; }

a:visited {
color: #fff; }

a:hover {
color: #fff; }

a:active {
color: #fff; }

/***********************************************
TEMPLATE CONTAINER
***********************************************/
.container {
display: grid;
height: 100vh;
width: 100vw; }

/* Main Container */
header {
text-align: center;
z-index: -3; }

main {
padding: 0; }

footer {
text-align: center; }

/* Home Site */
.slug-wrapper {
padding: 25px; }

.foto-margin {
margin-bottom: -5px; }

/* Logos - Template */
#inexorablez {
margin-top: 40px;
text-align: center; }

#kett {
text-align: center;
margin-top: 60px; }

#superior-attack {
text-align: center;
margin-top: 60px; }

#christian-s {
text-align: center;
margin-top: 60px; }

#fh-flensburg {
text-align: center;
margin-top: 60px; }

.galleryimage {
width: 100%;
height: auto;
pointer-events: none;
margin-bottom: 30px;
align-items: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

/* Contact - Template */
#keine-angst-ich-beiße-nicht {
text-align: center; }

#dont-worry-i-wont-bite {
text-align: center; }

.form-contact-container {
margin: 50px 25px 0 25px; }

/*******************************************************
Home (Background)
*******************************************************/
.slug {
text-align: center;
background-color: #fff;
font-size: 2.6em; }

.logos-section {
padding: 25px;
background-color: #e7e7e7; }

.photos-section {
padding: 25px; }

.sketches-section {
padding: 25px;
background-color: #e7e7e7; }

/*******************************************************
Images
*******************************************************/
.logo-link {
width: 100%;
height: 100%;
background-color: #fff; }

.home-link {
width: 100%;
height: auto;
display: inline-block;
padding: 10px 0;
font-size: 0.4em; }

.main-content,
.main-content-4,
.main-content-6 {
margin-bottom: 30px; }

.main-content-2,
.main-content-3,
.main-content-5 {
background-color: #fff !important; }

.card-headline {
font-size: 2em;
font-family: "Smooch Sans";
transition-delay: 0s, 0s;
transition-delay: 0.1s;
border: none;
height: auto;
align-content: center;
text-align: center; }

.card {
background-color: var(--secondary);
color: #fff;
align-content: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.card:link {
color: #fff; }

.card:visited {
color: #fff; }

.card:active {
color: #fff; }

/*******************************************************
Media Queries - (tablets, 768px and up)
*******************************************************/
@media (min-width: 768px) {
/* PRELOADER */
#loader {
top: 380px;
left: 225px; }

#loader-2 {
top: 383px;
left: 228px; }

#loader-3 {
top: 386px;
left: 231px; }

#no_video {
bottom: 0;
left: 25%; }

.top-btn {
right: 45px;
bottom: 45px; }

#noscript {
bottom: 50px;
left: 26%;
font-size: 3em;  }

#rc-imageselect, .g-recaptcha {
-webkit-transform: scale(0.77);
-ms-transform: scale(0.77);
transform: scale(0.77);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0; }

/* TEMPLATE CONTAINER */
main {
display: grid;
gap: 25px; }

#home main {
display: grid;
gap: 0px; }

.logos-section {
display: grid;
grid-column: 1 / 5;
padding: 50px; }

.logos-image {
grid-column: 1 / 3; }

.logos-link {
grid-column: 3 / 4; }

.slug-wrapper {
display: grid;
grid-column: 1 / 5; }

.contact-section {
display: grid;
grid-column: 1 / 5;
padding: 50px; }

.photos-section {
display: grid;
grid-column: 1 / 5;
grid-auto-flow: dense;
padding: 50px; }

.photos-image {
grid-column: 2 / 4; }

.photos-link {
grid-column: 1 / 2; }

.sketches-section {
display: grid;
grid-column: 1 / 5;
padding: 50px; }

.sketches-image {
grid-column: 1 / 3; }

.sketches-link {
grid-column: 3 / 4; }

#kontakt form {
padding: 50px 150px; }

#kontakt header {
padding-bottom: 100px; }

#kontakt main {
display: inline; }

.form-contact-container {
margin: 0 25px; }

#logos main {
display: inline; }

#fotos .gallery {
display: contents; }

#fotos main {
display: inline;
text-align: center; }

.form-container {
display: grid;
grid-column: 1 / 5; }

#contact-form {
padding-left: 170px; }

.input-form {
width: 80%; }

#inexorablez {
font-size: 2.5em;
margin: 60px 132px 0px 132px; }

#kett {
font-size: 2.5em;
margin: 60px 132px 0px 132px; }

#superior-attack {
font-size: 2.5em;
margin: 60px 132px 0px 132px; }

#christian-s {
font-size: 2.5em;
margin: 60px 132px 0px 132px; }

#fh-flensburg {
font-size: 2.5em;
margin: 60px 132px 0px 132px; }

/* IMAGES */
.card {
background-color: var(--secondary);
color: #fff;
align-content: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); }

.card-headline {
font-size: 2em;
transition-delay: 0s, 0s;
transition-delay: .1s;
border: none;
height: 100%;
align-content: center;
text-align: center; }

.galleryimage {
width: 70%; }

/* NAVBAR */
.topnav a {
font-size: 1.1em; }

.topnav.responsive a {
padding: 15px 0px; }

.home-link {
display: contents; }

.main-headline {
margin-top: 200px; }

.logo-headline {
margin-top: 60px; }

#logos main {
background: #151515;
background: linear-gradient(345deg, #151515 15%, #9acd31 52%, #151515 75%); }

#sketches main {
background: #151515;
background: linear-gradient(345deg, #151515 15%, orange 52%, #151515 75%); }

/* Imprint */
#impressum header {
padding: 0px 100px; }

#impressum p {
padding: 0px 100px; }

#impressum h3, h4 {
padding: 0px 100px; }
}

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

Ausgewählte Arbeiten  von mir[/b][b]  



[url=#]
[i]
[/url]

[url=#]
Siehe Logos
[/url]





[url=#]
[img]https://picsum.photos/360/260[/img]
[/url]

[url=/de/fotos/]
Siehe Fotos
[/url]





[url=/de/sketches/]
[img]https://picsum.photos/360/260[/img]
[/url]

[url=/de/sketches/]
Siehe Sketches
[/url]





Sei nicht[/b] Schütern,
sag [/i]Hallo!

Изменить:
У меня нет одинакового интервала между разделами. Вы можете увидеть это на белом и сером цвете фона. У меня есть отступы размером 50 пикселей, но они не работают в Chrome.
Вот снимок экрана моей проблемы:


На JSFiddle вы можете лучше увидеть мою проблему (768 пикселей):
Ссылка JSFiddle

Подробнее здесь: https://stackoverflow.com/questions/797 ... n-google-c