how to keep submenu with images centered in bootstrap nav-pill

Question

Friends, I am facing responsive problem while arranging images in submenu centered. I have a container of width 1280px, for all screens. As you can see in fiddle I have categories as menu then when we click on categories it opens a menu with images. I want these menus to be centered on all screens and its border should cover the whole screen.

In simple words our categories should start exactly below of left side logo and all the images should be always centered on all screen. Now the submenu with images always shifts to left or right I want images in submenu to take container width always and fit in container for all desktop screens by leaving left and right margin, and whole submenu should cover entire screen please have a look at this code demo for reference I am adding a screenshot please refer, and see if you can help me with this, thank you so much for giving your time.

This image shows what I am getting now problem_img This is what I want exact_img this is although have some less space at right. but I need something like this, all content should be fit in container width and leaving same space at left and right and background black that covers entire screen size. I tried with margin-left but it fits only for the screen for which I set, please help me in making this menu responsive. Any help suggestions are appreciated. Updated JSFiddle Thank you.

 [1]: https://jsfiddle.net/p7qrv3av/

Answer 1

https://jsfiddle.net/vinothsdev/p7qrv3av/5/

I have updated your fiddle here. Your html tags looks more messed, but I just modified it to work for your requirement.

.top-category-div{
background: black;
  color: white;
        padding-bottom: 54px;

}

.container-menu{               
    margin-right: auto;
margin-left: auto;   
}
.category-dropdown-menu{
 margin-left: -300px;
width: 1280px;
}
img{
  width:100%;
}

Answer 2

I have updated your css here Please Try This

.top-category-div{
    background: black;
      color: white;
          margin-top: 0px;
    margin-left: 0;
    padding-bottom: 54px;

}

.main-menu-div .col-sm-5, .main-menu-div .nav > li {  position: static; }
.main-menu-div .dropdown-menu { top:inherit; width:100%; }
.main-menu-div .top-category-div img { max-width:100px; }


@media (min-width: 1280px) {
    .container{  
        width: 1280px;
        padding-left: 0;
        padding-left: 0px;
        padding-right: 0px;
        margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    }

}