При просмотре на экране ноутбука справа не остается свободного места, и для просмотра содержимого нет необходимости прокручивать вправо. Но когда я посмотрел то же самое для более мелких (мобильных) устройств, с правой стороны осталось место, и есть полоса прокрутки для прокрутки вправо, что мне не нужно.
PFB код с возникающей проблемойблок нижнего комментария:
<!-- ========== MAIN CONTENT ========== -->
<main id="content" role="main">
<!-- Career Title Section -->
<div class="container space-top-1 space-top-md-4">
<div class="position-relative">
<!-- Title -->
<div class="w-md-80 w-lg-70 text-center mx-md-auto">
<div class="mb-4">
<h2 class="h1 text-primary font-size-md-down-3"> <span class="font-weight-semi-bold">Photo
Gallery</span>
</h2>
<p class="text-dark">View the pictures
</p>
</div>
</div>
<!-- End Title -->
</div>
</div>
<!-- End Career Title Section -->
<!-- FAQ Topics Section -->
<div class="space-0 space-md-2 pl-2 pr-2 pl-lg-9 pr-lg-9">
<div class="row">
<div class="col-md-2 mb-7 ">
Content 1 Card will be populated here
</div>
<div class="col-md-10">
Content 2 Card will be populated here
</div>
</div>
</div>
<!-- End FAQ Topics Section -->
</main>
<!-- ========== END MAIN CONTENT ========== -->
PFB скриншоты на меньшем устройстве, имеющем место справа. ![enter image description here](https://i.stack.imgur.com/Di0nr.png)
Но когда я использую контейнер в div, проблема решается на маленьких экранах, но это ограничивает меня отступом слева и справа. PFB код ниже:
<!-- ========== MAIN CONTENT ========== -->
<main id="content" role="main">
<!-- Career Title Section -->
<div class="container space-top-1 space-top-md-4">
<div class="position-relative">
<!-- Title -->
<div class="w-md-80 w-lg-70 text-center mx-md-auto">
<div class="mb-4">
<h2 class="h1 text-primary font-size-md-down-3"> <span class="font-weight-semi-bold">Photo
Gallery</span>
</h2>
<p class="text-dark">View the pictures
</p>
</div>
</div>
<!-- End Title -->
</div>
</div>
<!-- End Career Title Section -->
<!-- FAQ Topics Section -->
<div class="container space-0 space-md-2 ">
<div class="row">
<div class="col-md-2 mb-7 ">
Content 1 Card will be populated here
</div>
<div class="col-md-10">
Content 2 Card will be populated here
</div>
</div>
</div>
<!-- End FAQ Topics Section -->
</main>
<!-- ========== END MAIN CONTENT ========== -->
PFB снимок экрана на экранах меньшего размера (мобильный): ![enter image description here](https://i.stack.imgur.com/XS4dk.png)
Какое решение может быть для этого. Как можно убрать пространство, идущее справа, чтобы исчезнуть. Заранее спасибо !!