Почему мой код сетки CSS не работает над моей формой HTML, даже если он должен работать? Что с этим не так? ⇐ Javascript

[Anonymous]

Попытка реализовать сетки CSS для этой страницы «Приложение о приеме на работу» для задания, и я застрял на хорошие 3 часа, пытаясь выяснить, что с ней не так, хотя я следовал 5 различным учебным пособиям, и я следовал их инструкциям, и это не работает.




Job Application
[*]



We would like to acknowledge that the logo used in this page
was created by ChatGPT

• Home
• Job Opportunities
• About
• Apply

Job Application Form





Job Reference Number:

Select your job reference
001-Front-End Developer
002-Back-End Developer
003-Full-Stack Developer
004-Web Designer
005-Data Analyst/option>
006-UX/UI Designer
007-Software Engineer
008-Project Manager
009-Quality Assurance Tester
010-DevOps Engineer




Personal information

First Name:


Last Name:




Date of Birth:

Gender

Male

Female

Other



Address

Street Address:


Suburb/Town:


State:

Select your state
VIC
NSW
QLD
NT
WA
SA
TAS
ACT


Postcode:




Contact information

Email Address:


Phone Number:




Required Technical Skills:
HTML/CSS

JavaScript

Node.js
Python

SQL
Version Control (Git)
Graphic Design (Adobe XD, Figma)




Other skills



Submit Application
Re-do application






© 2025 Your Group Name | Project Management




< /code>
И это CSS < /p>
body, html{
padding: 0;
margin: 0;
}
*{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
/* Header and navigation css */

header{
text-align: center;
}
.name{
padding: 12px;
}
#header{
text-align: right;
padding-right: 0.5%;
list-style-type: none;
padding-top: 15px;
padding-bottom: 8px;
line-height: 1.8;
color: #EBC4BB;
background-color: #46767E;
}
#logo{
width: 125px;
float: left;
}
a{
color: inherit;
text-decoration: none;
}
a:hover{
color: #46767E;
background-color: #EBC4BB;
}
body, html, h1, h2{
padding: 0;
margin: 0;
box-sizing: border-box;
}

/* Body CSS properties*/
aside{
width: 25%;
float: right;
padding: 20px;
border: solid #46767E;
box-sizing: content-box;
text-align: center;
}
h1, h2{
color: #46767E;
}
section{
color: #234247;
}
#page-title{
text-align: center;
line-height: 80px;
}
#ack-of-land{
text-align: center;
}
.job-title{
background-color: #EBC4BB;
padding: 12px;
margin: 0;
}
.job-details{
padding: 20px;
}
h3{
padding-left: 20px;
}
.key-details{
line-height: 25px;
padding-left: 20px;
padding-top: 0px;
}
footer{
background-color: #46767E;
color: #EBC4BB;
text-align: center;
padding: 5px;
}
.aboutus{
text-align: center;
line-height: 25px;
}
#logo2{
margin: auto;
width: 500px;
margin-left: auto ;
margin-right: auto;
}
/* Grid Boxes for Application */
fieldset{
border: 0
}
.container {
display: grid;
grid-template-rows: repeat(6, auto); /* Changed to auto for flexibility */
grid-template-columns: repeat(3, 1fr); /* Using fr units for better responsiveness */
gap: 5px;
padding: 5px;
text-align: center;
}

.job-number {
background-color: #EBC4BB;
padding: 20px;
border: solid #46767E;
text-align: center;
grid-row: 1 / 2;
grid-column: 1 / 3;
}

.job-personalinfo {
background-color: #EBC4BB;
padding: 20px;
border: solid #46767E;
text-align: center;
grid-row: 2 / 4;
grid-column: 1 / 2;
}
< /code>
Вот как он сейчас выглядит, и то, что я стремлюсь к < /p>
Я бы очень признателен за любую помощь, которую я могу получить. Я понятия не имею, как это сделать, так как это мой первый раз, когда я использую сетку.

Подробнее здесь: https://stackoverflow.com/questions/795 ... uld-be-wor