Menu (Picture) does not fill width of my Joomla site

Question

I have set up my picture menu and it is working correctly but I notice it does not fill the width of the website.

I have set all pictures to max-width: 100%; and height: auto; within the actual component but it doesn't want to fill the width of the website.

My Protostar template was set to Fluid already.

I'd like the picture menu to be responsive relative to the width of my website and when the screen size is reduce I'd like the same.

This is currently not the case.

Any help would be appreciated.

This is the link to my site:

.image-title {
display: flex;
font-size: 30px;
color: white;
justify-content: center;
position: relative;
top: -70px;
line-height: normal;
}
.item-241 {
vertical-align: bottom;
padding: 0px;
display: table-cell;
}
.item-242 {
vertical-align: bottom;
padding: 0px;
display: table-cell;
}
.item-244 {
vertical-align: bottom;
padding: 0px;
display: table-cell;
}
.nav > li > a > img {
max-width: 100%;
height: auto;
}

Answer 1

If you do everything right, you will get the desired result. Use the following css rules for the solution:

.nav:ntd-child(2) {
    display: flex;
    justify-content: space-between;
}

In this rule, delete these lines that I pointed to.

.nav-tabs:before,
.nav-tabs:after,
.nav-pills:before, <--- delete
.nav-pills:after <--- delete {
    display: table;
    content: "";
    line-height: 0;
}

here I replaced max-width with width

.nav > li > a > img {
    width: 100%; 
    height: auto;
}

.item-241, .item-242, .item-244   {
    width: 33%; /*add this it*/
    vertical-align: bottom;
    padding: 0px;
    display: table-cell;
}

.nav-pills > li > a {
    padding-top: 8px;
    padding-bottom: 8px;
    margin-top: 2px;
    margin-bottom: 2px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    height: 90%; /*add this it*/
}

I warn you that the native size of all pictures is different, which means that if you set one height for everyone (fixed), it will not be beautiful. In order to be beautiful, the pictures need to be hooked through the background-image, in the div.