Flexbox и Bootstrap - столбцы не работают должным образом

Question

Я пытаюсь, чтобы члены моей команды и интересы были сосредоточены, а также текст. Я не хочу, чтобы 2 столбца занимали весь экран, и у меня также возникают проблемы с его переносом. Я хотел бы, чтобы 2 столбца были посередине, например: 25% отступ слева, 25% отступ справа, а затем 50% находится посередине с каждым из столбцов.

Спасибо вы за всех, кто отвечает, я действительно борюсь.

.centerObjects {
  float: left;
  padding-left: 11%;
  margin-left: auto;
  margin-right: auto;
}

.card {
  flex-grow: 2;
}

.wrapThatShit {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
}

<div class="d-flex justify-content-center wrapThatShit w-100">
    <div class="p-2 card w-25">
      <div class="card-body">
        <h5 class="card-title" style="text-align: center;">
          Interests
        </h5>
        <div *ngFor="let item of interests">
          <div class="centerObjects">
            <ng-container *ngIf="item === 'Music'">
              <mat-icon aria-hidden="false"> music_note </mat-icon>

              {{ item }}
            </ng-container>
            <ng-container *ngIf="item === 'Technology'">
              <mat-icon aria-hidden="false"> desktop_mac</mat-icon>
              {{ item }}
            </ng-container>
            <ng-container *ngIf="item === 'Sports'">
              <mat-icon aria-hidden="false"> sports_football</mat-icon>
              {{ item }}
            </ng-container>
            <ng-container *ngIf="item === 'Art'">
              <mat-icon aria-hidden="false"> create </mat-icon>

              {{ item }}
            </ng-container>
            <ng-container *ngIf="item === 'Fashion'">
              <mat-icon aria-hidden="false"> checkroom </mat-icon>

              {{ item }}
            </ng-container>
            <ng-container *ngIf="item === 'Gaming'">
              <mat-icon aria-hidden="false"> sports_esports </mat-icon>

              {{ item }}
            </ng-container>
            <ng-container *ngIf="item === 'Education'">
              <mat-icon aria-hidden="false"> menu_book</mat-icon>

              {{ item }}
            </ng-container>
            <ng-container *ngIf="item === 'Business'">
              <mat-icon aria-hidden="false"> business</mat-icon>

              {{ item }}
            </ng-container>
            <span> </span>
          </div>
        </div>
      </div>
    </div>
    <div class="p-2 card w-45">
      <div class="card-body">
        <div class="card-title">
          Team Members
          <hr />
        </div>
        ( image ) Person 1 <br />
        ( image ) Person 2 <br />
        ( image ) Person 3
      </div>
    </div>
  </div>

Answer 1

в вашем коде

• исправлено использование card-title и card-body
• добавлено 25% отступов по бокам
• добавлено align-items: center; для центрирование по вертикали
• добавлено justify-content: center; для центрирования по горизонтали

Надеюсь, приведенный ниже фрагмент поможет ...

.card {
  flex-grow: 2;
}

.card {
  border: 1px solid green;
}

.card-body {
  border: 1px solid red;
  padding: 0 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="d-flex justify-content-center wrapThatShit w-100">
  <div class="p-2 card w-25">
    <h5 class="card-title" style="text-align: center;">
      Interests
    </h5>
    <div class="card-body">
      <div *ngFor="let item of interests">
        <div class="centerObjects">
          <ng-container *ngIf="item === 'Music'">
            <mat-icon aria-hidden="false"> music_note </mat-icon>

            {{ item }}
          </ng-container>
          <ng-container *ngIf="item === 'Technology'">
            <mat-icon aria-hidden="false"> desktop_mac</mat-icon>
            {{ item }}
          </ng-container>
          <ng-container *ngIf="item === 'Sports'">
            <mat-icon aria-hidden="false"> sports_football</mat-icon>
            {{ item }}
          </ng-container>
          <ng-container *ngIf="item === 'Art'">
            <mat-icon aria-hidden="false"> create </mat-icon>

            {{ item }}
          </ng-container>
          <ng-container *ngIf="item === 'Fashion'">
            <mat-icon aria-hidden="false"> checkroom </mat-icon>

            {{ item }}
          </ng-container>
          <ng-container *ngIf="item === 'Gaming'">
            <mat-icon aria-hidden="false"> sports_esports </mat-icon>

            {{ item }}
          </ng-container>
          <ng-container *ngIf="item === 'Education'">
            <mat-icon aria-hidden="false"> menu_book</mat-icon>

            {{ item }}
          </ng-container>
          <ng-container *ngIf="item === 'Business'">
            <mat-icon aria-hidden="false"> business</mat-icon>

            {{ item }}
          </ng-container>
          <span> </span>
        </div>
      </div>
    </div>
  </div>
  <div class="p-2 card w-45">
    <h5 class="card-title" style="text-align: center;">
      Team Members
    </h5>
    <div class="card-body">
      ( image ) Person 1 <br /> ( image ) Person 2 <br /> ( image ) Person 3
    </div>
  </div>
</div>