Есть ли правильный способ использовать несколько макетов из двух столбцов, не испортив заголовок? ⇐ CSS

[Anonymous]

Я делал веб-сайты для проекта до того, как срок его реализации истечет в следующий понедельник, но когда я вставил еще один заголовок, столбец продолжал портиться, потому что у меня монитор с разрешением 1080p. У меня нет слов, чтобы описать, поэтому буду признателен, если вы захотите решить эту проблему. Скопируйте весь фрагмент и измените стиль, чтобы я не запутался. Изображение

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

    body {
font-family: Helvetica, sans-serif;
background: palegreen;
}
.wrap {
display: flex;
}
.left {
background: ForestGreen;
flex-basis: 10%;
padding: 10px;
}
.right {
background: Honeydew;
flex-basis: 90%;
padding: 20px;
height: 94vh;
overflow: auto;
}
.left2 {
float: left;
width: 45%;
padding: 5px;
}
.right2 {
float: left;
width: 45%;
padding: 5px;
}
.column1 {
float: left;
width: 45%; /* Adjusted width */
padding: 10px;
height:  650px;
}
ul.col2 {
list-style-type: none;
width: 600px;
}
h3.col2 {
font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}
li.col2 img {
float: left;
margin: 0 15px 0 0;
}
li.col2 p {
font: 200 Helvetica, Verdana, sans-serif;
}
li.col2 {
padding: 10px;
overflow: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
a:link {
color: LightGreen;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: LightGreen;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: YellowGreen;
background-color: transparent;
text-decoration: none;
}
a:active {
color: DarkKhaki;
background-color: transparent;
text-decoration: none;
}

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

[img]Images/3.jpg[/img]
Senior High School
This is the last school for students who
are beginning to graduate and can finally express their new
development and pursue their jobs or careers, ranging from eleventh
to twelfth grade. Students who participated in senior high school
are the age of sixteen to eighteen. Here are the strands listed
below.

[list]
[*]
[img]Images/Grade11.jpg[/img]
Grade 11
It is the first year of senior high school.  Students
in twelfth grade are usually sixteen to seventeen years old.

[/list]

[list]
[*]
[img]Images/Grade12.jpg[/img]
Grade 12
It is the second to last year of senior high school,
and they are preparing for their graduation to pursue for colleges
to learn. Students in twelfth grade are usually seventeen to
eighteen years old.

[/list]


Academic Strands

[list]
[*]
[img]Images/ABM.jpg[/img]
ABM
This is known as Accountancy, Business, and Management. Those who
want to participate ABM can learn about becoming an accountant,
and those who want to compare statistics based on economics.

[*]
[img]Images/HUMMS.png[/img]
HUMMS
This is known as Humanities and Social Sciences. Those who want
to participate HUMMS can learn about the history, social studies,
geography and much more.

[/list]

[list]
[*]
[img]Images/STEM.jpg[/img]
STEM
This is known as Sceince, Technology, Engineering, and Mathematics.
Thos who want to particiapte STEM can learn about equating calculations,
technology, and wanting to become a technician to play with.

[*]
[img]Images/TVL.jpg[/img]
TVL
Also known as Technical Vocational Livelihood Track, these
are one of the few strands to have multiple tracks for those
who want to choose based on their priorities.

[/list]

Technology Vocational Livelihood
Home Economics
Students can learn how to support themselves and family
around their lives. Here are the list of Home Economics tracks to
discover:

[list]
[*]
Housekeeping
For those who want to take apart of housekeeping, students
can learn how to operate homes to keep the place tidy, depending on
levels of maintenance.

[*]
Food and Bevreges Services
People can discover about servicing in
food and beverages to make sure that none of the food or drinks can be
served spoiled.


Bread & Pastry
Students can develop on learning how to prepare
and produce bakery/pastry products, cakes and desserts. These can also
prepare on making creative types of pastry and desserts based on
the artist's creativity.


Local Tool Service
People can learn more about local tool services
on our daily lives.  Using the tools such as hammer, drill, and a saw
can create or repair many products and buildings.

[/list]

[list]
[*]
Bartending
Students can learn about serving drinks and deliver them
to the guests to keep them excited.

[*]
Front Office Services
Students can now learn about initial contact
between a customer and business. These are the services that are
directly involved in the customer service process.

[*]
Commercial Cooking
Students may develop to prepare of food for the
greater public. It serves as a significant contributor to the economy
by generating revenue, supporting small businesses, and driving tourism.

[*]
Caregiving
Students now study about providing care for the daily needs
of someone that is unable to care for themselves. The care my include
addressing the physical and emotional needs of someone that requires
continuous support and attention.

[/list]

Information & Communication Technology
Students can learn how to
program computers, reverse engineering, learning about components,
and reparing gadgets whatever they succeed. Here are two lists
of Information and Communication Technology tracks to discover:
Requirements


Grade 11
[h4]STUDENTS FROM PUBLIC SCHOOLS[/h4]
[list]
[*]2 pcs. 2x2 ID picture(White Background)
[*]2 copies of birth certificate
[*]Original Certificate of Good moral character
[*]Original Form - 138 (Card with LRN)
[*]Copy of Certificate of Comlpetion
[/list]
[h4]STUDENTS FROM PRIVATE SCHOOLS[/h4]
[list]
[*]2 pcs. 2x2 ID picture(White Background)
[*]2 copies of birth certificate
[*]Original Certificate of Good moral character
[*]Original Form - 138 (Card with LRN)
[*]Copy of Certificate of Comlpetion
[*]ESC Certification (System Generated From PEAC)
[/list]
[h4]NON-ESC GRANTEES FROM PUBLIC SCHOOLS
(APPLICANTS FOR VOUCHER PROGRAM)[/h4]
[list]
[*]2 pcs. 2x2 ID picture(White Background)
[*]2 copies of birth certificate
[*]Original Certificate of Good moral character
[*]Original Form - 138 (Card with LRN)
[*]Copy of Certificate of Comlpetion
[*]ESC Certification (System Generated From PEAC)
[*]Latest ITR (Income Tax Return) of Parent Gaurdian (if working)
[*]Certificate of Tax Exemption/Certificate of Indegency of Parent/
Guardian from Municapal Office (if not working)
[/list]

Grade 12
[list]
[*]2 pcs.  2x2 ID picture(White Background)
[*]2 copies of birth certificate
[*]Original Certificate of Good moral character
[*]Original Form - 138 (Card with LRN)
[*]Copy of Certificate of Comlpetion
[/list]

Я все перепробовал, но ничего не помогло.
Вот что это должно быть. Изображение

Подробнее здесь: https://stackoverflow.com/questions/784 ... ng-up-with