Apologies for the extensive uploads, I'm not sure how else to proceed. I'm attempting to rearrange my grid layout at a specific width so that the paragraphs repeat with the images. However, I'm encountering a random space between 1 and 2 when I do this. Upon inspecting with F12, it appears as if there is a space element, even though it is part of the .content section. Can someone help me understand what's happening?
* {
font-family: 'Courier New', Courier, monospace;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 2600px;
}
header {
background-color: black;
padding: 50px 0;
}
h1 {
font-size: xx-large;
text-align: center;
color: white;
}
.content {
height: 1000px;
display: grid;
grid-template: repeat(3, 1fr)/repeat(2, 1fr);
justify-content: center;
align-items: center;
margin-top: 100px;
row-gap: 4em;
}
.content-image {
margin: auto;
width: 300px;
height: 300px;
}
.aparagraph {
width: 300px;
height: 300px;
font-weight: 700;
font-size: larger;
text-align: center;
vertical-align: middle;
margin: 0 auto;
}
@media (max-width: 965px) {
.content {
max-height: 2600px;
display: grid;
grid-template: repeat(5, 1fr)/1fr;
justify-content: center;
align-items: center;
margin-top: 100px;
}
.p1 {
order: 1;
}
.p2 {
order: 2;
}
.p3 {
order: 4;
}
.img1 {
order: 2;
}
.img2 {
order: 3;
}
.img3 {
order: 5;
}<body>
<header>
<h1>Grid-Pratice</h1>
</header>
<main>
<section class="content">
<p class="aparagraph p1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum soluta atque voluptatibus amet sint voluptatem illo, eos blanditiis. Ducimus dicta deleniti cum est soluta repellat aliquid asperiores nesciunt recusandae eos?</p>
<img src="images/Black and White Four Arm Monster Clip Art - Black and White Four Arm Monster Image.png" alt="" class="content-image img1">
<img src="images/Graphics by Ruth - Monster.jpg" alt="" class="content-image img2">
<p class="aparagraph p2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum soluta atque voluptatibus amet sint voluptatem illo, eos blanditiis. Ducimus dicta deleniti cum est soluta repellat aliquid asperiores nesciunt recusandae eos?</p>
<p class="aparagraph p3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum soluta atque voluptatibus amet sint voluptatem illo, eos blanditiis. Ducimus dicta deleniti cum est soluta repellat aliquid asperiores nesciunt recusandae eos?</p>
<img src="images/Mono Monster Urban Threads Unique and Awesome Embroidery Designs.jpg" alt="" class="content-image img3"> '
</section>
</main>
</body>It seems that the @media code is changing to u/media when copied and pasted.