Как создать меню из двух кнопок для отображения рядом?

Question

Нужно некоторое руководство с этим меню кнопок, которое я пытаюсь создать. Во-первых, мне требуется интервал после каждой кнопки, чтобы между кнопками был пробел.

Во-вторых, я хочу, чтобы зеленый список кнопок находился рядом со списком красных кнопок, а не под ним, и снова между ними. эти две кнопки меню. Как мне это сделать?

.btn-group1 a {
  background-color: red; 
  border: 1px solid white; 
  color: white; 
  cursor: pointer; 
  padding: 1em, 2em;
  width: 20%; 
  display: block; 
  font: medium bold;
  font-family: arial, sans-serif;
}

.btn-group2 a {
  background-color: green; 
  border: 1px solid white; 
  color: white; 
  cursor: pointer; 
  padding: 1em, 2em;
  width: 20%; 
  display: block; 
  font: medium bold;
  font-family: arial, sans-serif;
}

.btn-group a:not(:last-child) {
  border-bottom: none; 
}

.btn-group a:hover {
  background-color: #3e8e41;
}


<div class="btn-container">      
         <div class="btn-group1">
        <a href="#">Introduction</a>
        <a href="#">Career Development - IT Support</a>
        <a href="#">Career Development - Testing</a>
      </div> 


      <div class="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>
      </div>
    </div>

Answer 1

Попробуйте согнуть, чтобы расположить их рядом:

.btn-container {
   display: flex;
   flex-direction: row;
}

, так как в качестве пробела добавьте нижнюю границу к существующим css для ваших классов:

.btn-group1 a {
  ...
  margin-bottom: 1em;
  ...
}

.btn-group2 a {
  ...
  margin-bottom: 1em;
  ...
}

Рассмотрите перестройка вашего css для устранения дублирования:

.btn-group a {
  border: 1px solid white; 
  color: white; 
  cursor: pointer; 
  padding: 1em, 2em;
  width: 20%; 
  display: block; 
  font: medium bold;
  font-family: arial, sans-serif;
  margin-bottom: 1em;
}
.btn-group1 a {
  background-color: red; 
}

.btn-group2 a {
  background-color: green; 
}

.btn-group a:not(:last-child) {
  border-bottom: none; 
}

.btn-group a:hover {
  background-color: #3e8e41;
}


<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>
      </div>
    </div>