Center text within a div

You see, I have a table Game with the following values:

Schema::create('juegos', function (Blueprint $table){
        $table->increments('id');
        $table->integer('numero')->unique();
        $table->string('nombre');
        $table->unsignedInteger('agrupacion_id');
        $table->foreign('agrupacion_id')->references('id')->on('agrupacions');
        $table->text('materiales');
        $table->text('organizacion');
        $table->text('desarrollo');
        $table->string('foto');
        $table->text('observaciones');
        $table->text('variantes');
        $table->timestamps();
    });

And the data of a game is shown in the following view:

@extends('layouts.app')

@section('content')
    <h1 class="text-center text-mute"><u>Datos del juego</u></h1>

    <div class="pl-5 pr-5">
        <div class="row justify-content-center">
        <div class="col-md-3 card card-1">
            <h2 class="text-center card-title">Nº {{$j->numero}}: {{$j->nombre}}</h2>
            <img class="card-img-top" src="{{url($j->ruta())}}"/>
            <div class="card-body">
                <center>
                    <span class="badge badge-cat badge-info">Materiales necesarios: {{$j->materiales}}</span>
                    <span class="badge badge-cat badge-info">Organcización de equipos: {{$j->agrupacion->nombre}}</span>
                </center>

                <hr>

                <h3>Posicionamiento:</h3>
                <span class="badge badge-cat badge-primary">{{$j->organizacion}}</span>

                <hr>

                <h3>¿En que consiste?</h3>
                <span class="badge badge-cat badge-primary">{{$j->desarrollo}}</span>

                <hr>

                <h3>Normas:</h3>
                <span class="badge badge-cat badge-primary">{{$j->observaciones}}</span>

                <hr>

                <h3>Variaciones:</h3>
                <span class="badge badge-cat badge-primary">{{$j->variantes}}</span>

                <hr>

                <?php
                    $contenidos=$j->enlaces;
                ?>

                @if(count($contenidos))
                    <h3>Habilidades que seran puesta a prueba de los participantes:</h3>
                    @foreach($contenidos as $contenido)
                        <span class="badge badge-cat badge-info">{{$contenido->contenido->nombre}}</span>
                    @endforeach
                @endif
            </div>
        </div>
        </div>
    </div>
@endsection

And when creating a game, I see myself with this:

I need that the content of the texts do not leave the div. How do I achieve it?

Edit: I have left only badge-primary, and I find this:

At last there are line breaks, but I would like more space between the bluish background and the text, because up and down there is a good space, but from left to right this does not exist that spacing.

I've also tried class="alert alert-info":

But it does not look good at all.

Another thing I've tried is class="btn-primary", giving me the same result as badge-primary. I've also tried class="alert-primary", which gives the following result:

It looks better, but I still have the same problem as with btn-primary and badge-primary, that the bluish background does not give space between the letter and the white background.