Как сделать рамку вокруг основного контента div?

Question

У меня есть проект, который должен иметь свойства верхнего края, с свойствами нижнего края, но я не могу понять, как это сделать наилучшим образом. Я сделал сетку из 7 столбцов, и я думал сделать 5 из этих столбцов (в середине), которые будут иметь значение границы, но я не могу этого сделать. При назначении значений отдельным классам граница не применяется так, как я хочу. Может ли кто-нибудь помочь мне с этим и дать мне несколько советов, как это сделать наилучшим образом? В div, который я сделал, должно быть пространство вокруг него с левой стороны, а правая граница должна быть применена только к содержимому, а не к пространству вокруг div. Может быть, свойства ширины с выравниванием по центру помогут?

Попытка применения границ для отдельных классов

    .content__logo {
    grid-area: logo;
    }

    .content__info {
    grid-area: info;

       p {
        font-family: Inter;
         
    }

    .content__section {
     padding-top: 2em;
     padding-bottom: 1em;
     display: grid;
     background: $header-light;
     grid-template-columns: repeat(7, 1fr);
     grid-template-areas: 
     " . logo info info listing listing . "
     }

    #readMore {
    margin-left: 3.35em;
    }

    .list__section {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
     grid-area: listing;
     }

    .list__row {
     display: flex;
     flex-wrap: nowrap;
     margin: 0;
     }

    .list__li {
     list-style-type: none;
     margin: 0;
     font-family: Inter;
     }

  <div class="content__section"> <!--start-->
        <img class="content__logo" src="images/carrier-cma-cgm.svg">

    <div class="content__info"> 
        <h5>CMA CGM Group</h5>
        <p>As a global carrier operating on all the world's<br>
        seas and oceans, the Group also benefits from<br>
        the renowned expertise of its subsidiaries</p>

        <a href="#">Read more</a>
    </div>

    <section class="list__section">
        <ul class="row list__row">
            <li class="col list__li">APMU</li><li class="col 
            list__li">CADU</li><li class="col list__li">CNIU</li><li 
            class="col 
            list__li">COZU</li><li class="col list__li">ENAU</li><li 
            class="col 
            list__li">FAUU</li>
        </ul>
        <ul class="row list__row">
            <li class="col list__li">APMU</li><li class="col 
            list__li">CADU</li><li class="col list__li">CNIU</li><li 
            class="col 
            list__li">COZU</li><li class="col list__li">ENAU</li><li 
            class="col 
            list__li">FAUU</li>
        </ul>

        <a href="#" id="readMore">Read more</a>
    
    </section>  
    </div>