I have created a responsive tab and pill list using a combination of CSS and Bootstrap 4. However, I am facing an issue where the boxes in col-2 do not align with the tabs above them. I want the edges of the col-2 boxes to align perfectly with the edges of the tabs. How can I achieve this alignment? Thank you for your help.
Here is a link to the screenshot: https://i.sstatic.net/EIfDk.jpg
Should I adjust the width of the boxes? They currently have a class of col-2. Thank you in advance for your guidance.
<div class="tab-content">
<!-- Tab content structure goes here -->
</div>
.row .col-2 {
width: 200% !important;
padding: 0px !important;
}
.row .col-2 .box {
width: 100%;
}
div.maincontainer.adsl {
margin-top: 0px !important;
}
div.maincontainer.adsl .col {
font-size: 0.6rem;
}
div.row .col-2 {
margin: 0 auto;
}
#adsl {
margin-left: -1px;
}
div.row#adslrow {
margin-left: -35px !important;
}
div#adsl.tab-pane {
margin: 0 auto;
}
.adsl ul.netfeatures{
list-style: none !important;
}