Stack objects as a multiple item selector with html and css

Question

I have a list of words I want to stack in columns to save and use the left place in an html file for a Django project:

I’m not very good at web development, feel free to explain to me as a 10 year old if I do something wrong.

{% extends "todo/base.html" %}

{% block content %}

   <style>
      .elements {
        display: block;
      }
      ul.items {
        display: flex;
        margin: 0;
        padding: 0;
        flex-wrap: wrap;
        list-style: none;
      }
      li.item {
        flex: 1 0 20%;
        padding: 8px;
        margin: 2px;
        border-radius: 8px;
        border: 1px solid rgba(61, 86, 233, 0.3);
        text-align: center;
      }
      .col {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    </style>

  <!-- Header -->
  <header class="intro-header">
    <div class="container">
      <div class="col-lg-5 mr-auto order-lg-2">
      <h3><br>Tell me something about you... </h3>
      </div>
    </div>
  </header>

  <!-- Page Content -->
  <section class="content-section-a">

    <div class="container">
      <dt>
        <span>Pick the keywords you want to express when wearing perfume</span>
      </dt>

    <form action = "/getmatch" method="POST">
      {% for keyword in keywords %}
        <div class="elements">
            <ul class="items ">
               <li class="item col-xs-6 col-sm-3 col-md-3 col-lg-3">
                 <div data-toogle="buttons" class="col">
                    <span>{{ keyword.title }}</span>
                 </div>
               </li>
            </ul>
        </div>
      {% endfor %}
      {% csrf_token %}
        <button type="submit">Envoyer</button>
    </form>
    </div>
  </section>

  <!-- Bootstrap core JavaScript -->
  <script src="static/vendor/jquery/jquery.min.js"></script>
  <script src="static/vendor/popper/popper.min.js"></script>
  <script src="static/vendor/bootstrap/js/bootstrap.min.js"></script>



{% endblock %}

I don’t know if I should put it in a particular css file like <style.css> or if I should add it as <style.css> at the end or beginning of my file, I chose this option that I found simpler.

Today I have buttons that look good but still don’t fit next to each other:

I don’t know if it’s related, but I don’t have the multi-selection effect either.

In base.html I am loading the following estilo.css with the following line:

<link href="static/css/style.css" rel="stylesheet">

/*!
 * Start Bootstrap - Landing Page (http://startbootstrap.com/template-overviews/landing-page)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-landing-page/blob/master/LICENSE)
 */

body, html {
  width: 100%;
  height: 100%;
}

body, h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant', serif;
}

.intro-header {
  padding-top: 50px;
  padding-bottom: 50px;
  text-align: center;
  color: #f8f8f8;
  background: url(../img/intro-bg.jpg) no-repeat center center;
  background-size: cover;
}

.intro-message {
  position: relative;
  padding-top: 20%;
  padding-bottom: 20%;
}

.intro-message>h1 {
  margin: 0;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
  font-size: 5em;
}

.intro-divider {
  width: 400px;
  border-top: 1px solid #f8f8f8;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.intro-message>h3 {
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.intro-social-buttons i {
  font-size: 80%;
}

.recommendations {
  padding-top: 10%;

}

@media(max-width:767px) {
  .intro-message {
    padding-bottom: 15%;
  }
  .intro-message>h1 {
    font-size: 3em;
  }
  ul.intro-social-buttons>li {
    display: block;
    margin-bottom: 20px;
    padding: 0;
  }
  ul.intro-social-buttons>li:last-child {
    margin-bottom: 0;
  }
  .intro-divider {
    width: 100%;
  }
}

.network-name {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
}

.content-section-a {
  padding: 50px 0;
  background-color: #f8f8f8;
}

.content-section-b {
  padding: 50px 0;
  border-top: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
}

.section-heading {
  margin-bottom: 30px;
}

.section-heading-spacer {
  float: left;
  width: 200px;
  border-top: 3px solid #e7e7e7;
}

.banner {
  padding: 100px 0;
  color: #f8f8f8;
  background: url(../img/banner-bg.jpg) no-repeat center center;
  background-size: cover;
}

.banner h2 {
  margin: 0;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
  font-size: 3em;
}

.banner ul {
  margin-bottom: 0;
}

.banner-social-buttons {
  float: right;
  margin-top: 0;
}

@media(max-width:1199px) {
  ul.banner-social-buttons {
    float: left;
    margin-top: 15px;
  }
}

@media(max-width:767px) {
  .banner h2 {
    margin: 0;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
    font-size: 3em;
  }
  ul.banner-social-buttons>li {
    display: block;
    margin-bottom: 20px;
    padding: 0;
  }
  ul.banner-social-buttons>li:last-child {
    margin-bottom: 0;
  }
}

.form {
  padding-left: 50px;
  padding: 50px;
}

.space {
  padding-top: 60%;
}
footer {
  padding: 50px 0;
  background-color: #f8f8f8;
}

p.copyright {
  margin: 15px 0 0;
}