У меня есть пара css вопросов, с которыми мне нужна помощь.
1: Я разделил меню кнопок, используя flex, чтобы было 6 столбцов. Когда я смотрю на расстояние между кнопками между столбцами, они не выглядят равномерно, как мне добиться этой ровности?
2: Когда я делаю экран меньше, чтобы проверить отзывчивость, это кажется беспорядком. Кнопки перекрывают заголовок, и я хочу, чтобы все столбцы кнопок отображались одна над другой. Как это можно исправить?
Ниже приведены HTML и CSS
<!-- First slide -->
<section id="slide=1">
<header>Slides Selection Page</header>
<div class="wrap">
<div class="btn-container">
<div class="btn-group btn-group1">
<a href="#">Introduction</a>
<a href="#">Career Development - IT Support</a>
<a href="#">Career Development - Testing</a>
</div>
<div class="btn-group btn-group2">
<a href="#">Lesson 1: Methodologies and Development Lifecycle</a>
<a href="#">Lesson Breakdown</a>
<a href="#">Methodologies</a>
<a href="#">Waterfall SDLC</a>
<a href="#">Agile SDLC</a>
<a href="#">Scrum vs Kanban</a>
<a href="#">Ceremonies</a>
<a href="#">Methodologies and Development Lifecycle - Practice Questions</a>
</div>
<div class="btn-group btn-group3">
<a href="#">Lesson 2: IT Support</a>
<a href="#">Lesson Breakdown</a>
<a href="#">Team Structure - IT Support</a>
<a href="#">What is IT Support and Skills Required</a>
<a href="#">Example Call Logs</a>
<a href="#">IT Support - Practice Questions</a>
</div>
<div class="btn-group btn-group4">
<a href="#">Lesson 3: Testing Foundations</a>
<a href="#">Lesson Breakdown</a>
<a href="#">Development Team Structure</a>
<a href="#">What is Testing?</a>
<a href="#">Manual Testing vs Automation Testing</a>
<a href="#">Levels of Testing</a>
<a href="#">Types of Testing</a>
<a href="#">Test Environments</a>
<a href="#">Testing Foundations - Practice Questions</a>
</div>
<div class="btn-group btn-group5">
<a href="#">Lesson 4: Manual Testing Activities</a>
<a href="#">Lesson Breakdown</a>
<a href="#">Test Cases, Test Suites, Defect Reports and Test Reports</a>
<a href="#">Example Test Case</a>
<a href="#">Example Test Suite</a>
<a href="#">Example Defect Report</a>
<a href="#">Example Test Report</a>
<a href="#">Example Test</a>
<a href="#">Manual Testing Activities - Practice Questions</a>
</div>
<div class="btn-group btn-group6">
<a href="#">Lesson 5: Intro Into Automation</a>
<a href="#">Lesson Breakdown</a>
<a href="#">BDD and TDD</a>
<a href="#">Gherkin Language - Given When Then</a>
<a href="#">Structure Your Automation</a>
<a href="#">Automation Walkthrough</a>
<a href="#">Intro Into Automation - Practice Questions</a>
</div>
</div>
</div>
</section>
---
.btn-group a {
border: 1px solid white;
color: white;
cursor: pointer;
text-align: center;
display: block;
font-size: medium;
font-weight: bold;
margin-bottom: 1em;
overflow-wrap: normal;
width: 95%;
padding: 0.5em;
}
.btn-group1 a {
background-color: red;
}
.btn-group2 a {
background-color: green;
}
.btn-group3 a {
background-color: red;
}
.btn-group4 a {
background-color: green;
}
.btn-group5 a {
background-color: red;
}
.btn-group6 a {
background-color: green;
}
.btn-group a:not(:last-child) {
border-bottom: none;
}
.btn-group a:hover {
background-color: #3e8e41;
}
.btn-container {
display: flex;
flex-direction: row;
width: 100%;
position: relative;
}