Hola buenas, mi pagina web es 100% responsive menos una parte que no puedo solucionar y me gustaria saber como hacerlo. Es un app adentro de otra y no puedo hacer que sea responsive. Aca esta el codigo
<table class="table table-bordered" style="color:#f8efed; margin-top: 10px;">

    <thead>

        <tr>

            <th colspan="3" class="text-center">
                Carro de compras
               
            </th>

        </tr>

        <tr>

            <th>Producto</th>
            <th>Cantidad</th>
            <th>Suma</th>

        </tr>


    </thead>


    <tbody>
        {% if request.session.carro.items %}
            {% for key, value in request.session.carro.items %}

                <tr class="text-center">
                    <td>{{value.nombre}}</td>
                    <td>{{value.cantidad}}</td>
                    <td>
                        <a href="{% url 'carro:agregar' value.producto_id %}" class="btn btn-sm btn-success">+</a>
                        <a href="{% url 'carro:restar' value.producto_id %}" class="btn btn-sm btn-success">-</a><br>
                        {{value.precio}} $
                    </td>
                </tr>
            {% endfor %}

        {% else %}
       
            <tr style="color:  #f8efed;">
                <td colspan="3">
                    <div class="alert alter-danger text-center">
                        Sin productos en el carro
                    </div>
                </td>
            </tr>

        {% endif %}   

    </tbody>

    <tfoot>
        <tr>
            <td colspan="3">
                Total: {{importe_total_carro}} $
            </td>
        </tr>
    </tfoot>
</table>

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

{% load static %}

{% block content %}

    <div class="container">

        <div style="float:right ;">
       
           
            {% include "carro/widget.html" %}
           
        </div>

        <div class="row">

    {% for producto in productos %}

    <div class="col-auto">
        <div class="card" style="width: 100%; margin: 5px 5px;">
            <img src="{{producto.imagen.url}}" alt="producto" class="card-img-top">
            <div class="card-body" style="text-align: center;">
                <h6 class="card-title">{{producto.nombre}}</h6>

                <p class="card-text">{{producto.precio}}&nbsp;$</p>
            </div>
            <div class="card-footer text-center">
                <a href="{% url 'carro:agregar' producto.id %}" class="btn btn-success">Agregar al carro</a>
            </div>
        </div>
    </div>

    {% endfor %}

        </div>
    </div>

{% endblock %}