Make dropdown menu use 100% width using Bootstrap 4 - html

Question

So this problem is making me go crazy guys. I created a dropdown menu using Boostrap 4, however when the screen is mobile size I used media query. I want to make my dropdown menu use 100% with when in mobile, and I already tried putting width 100% in some divs or position fixed, but none of that worked.
Here is my screen:
The part that is marked in blue is the one that I want to cover the whole screen.
Here is my HTML code:
<div class="notification-container dropdown">
<button
class="btn notification-button"
type="button"
id="dropdownMenuButton"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<i class="fa fa-bell-o"></i>
</button>
<div
class="dropdown-menu dropdown-menu-right notification-container-header"
aria-labelledby="dropdownMenuButton"
>
{{ notifications.length }} notificações
<div class="notification-container-list-body">
<ul class="list-group list-group-flush">
<ng-template
ngFor
let-notification
[ngForOf]="notifications"
let-i="index"
>
<ng-template [ngIf]="notification.imagem">
<li class="notification-container-list-body-item">
<a
class="list-group-item notification-container-list-body-item-image"
routerLink="{{ notification.link }}"
>
<img src="{{ notification.imagem }}" alt="" />
<div>
<div>
{{ notification.titulo }}
</div>
<div>
{{ notification.descricao }}
</div>
</div>
</a>
<button
class="btn delete-notification"
(click)="dropdownPersist($event)"
(click)="deleteNotification(notification.id)"
>
<i class="fa fa-close"></i>
</button>
</li>
</ng-template>
<ng-template [ngIf]="!notification.imagem">
<li class="notification-container-list-body-item">
<a
class="list-group-item notification-container-list-body-item-noimage"
href="{{ notification.link }}"
>
<div>
<div>
{{ notification.titulo }}
</div>
<div>
{{ notification.descricao }}
</div>
</div>
</a>
<button
class="btn delete-notification"
(click)="dropdownPersist($event)"
(click)="deleteNotification(notification.id)"
>
<i class="fa fa-close"></i>
</button>
</li>
</ng-template>
</ng-template>
</ul>
</div>
</div>
</div>
And here is my SCSS code:
p,
a {
margin: 0;
padding: 0;
border: 0;
text-decoration: none;
}
.notification-button {
border-color: transparent;
box-shadow: none;
i {
color: #fff;
}
&:focus {
i {
color: #0ff;
}
}
}
.notification-container-header {
text-align: center;
font-size: 0.9rem;
padding-top: 0px;
padding-bottom: 0px;
border-bottom: 0px;
border-radius: 0;
background-color: #0ff;
color: #000;
font-weight: 500;
}
.notification-container-list-body {
margin-left: 3px;
margin-right: 3px;
ul {
margin-bottom: 3.5px;
max-height: 250px;
overflow: auto;
}
}
.notification-container-list-body-item {
display: grid;
background: #000;
grid-template-columns: 1fr 0.1fr;
padding: 10px 10px 6px 11px;
border-bottom: 1px solid #fff;
}
.notification-container-list-body-item-image {
background: #000;
display: grid;
grid-template-columns: 0.2fr 1fr;
justify-content: center;
img {
height: 30px;
width: 60px;
padding-right: 9px;
}
div {
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
color: #fff;
&:nth-child(1) {
font-size: 10px;
}
&:nth-child(2) {
font-size: 14px;
}
}
}
.notification-container-list-body-item-noimage {
#extend .notification-container-list-body-item-image;
grid-template-columns: 1.9fr 0.1fr;
div {
width: 261px;
}
}
.delete-notification {
padding: 0;
border-color: transparent;
box-shadow: none;
i {
height: 12px;
width: 12px;
color: #646464;
}
&:focus {
i {
color: #646464;
}
}
}
#media (max-width: 576px) {
.notification-container-header {
margin-top: 0;
border: 0;
}
.notification-container-list-body-item {
grid-template-columns: 1.7fr 0.3fr;
padding: 10px 10px 6px 11px;
}
.notification-container-list-body-item-image {
img {
height: 30px;
width: 70px;
padding-right: 9px;
align-self: center;
}
div {
color: #fff;
&:nth-child(1) {
font-size: 12px;
}
&:nth-child(2) {
font-size: 16px;
}
}
}
.notification-container-list-body-item-noimage {
grid-template-columns: 2.3fr 0.3fr;
}
}
I am also using Angular 9, to make dynamic content.
Can some one help?

Answer 1

.notification-container-list-body {
width: 100%; <=====================================================
margin-left: 3px;
margin-right: 3px;
ul {
margin-bottom: 3.5px;
max-height: 250px;
overflow: auto;
}
}