The problem occurs because your modified menu.min.css file which is used by the module and the following CSS properties:

width:495px

For .ux-menu a.ux-menu-link-last CSS rule.

Regards,
ARI Soft

495px was that width because it was the width of the last menu item, in this case "Contact" as I want the menu to extend across to the end of the page. If I change that width the sub menu item width becomes the same width of this last menu item.
Please see images of original post that shows the menu going all the way to the right. I don't know why your response to my post isn't in the same post as my original post.

You set 495px width for all last menu items in main menu and sub-menus. Restore menu.min.css file to original state and read here how to change menu items width.

Regards,
ARI Soft

Thank you for the instructions. I restored the original file and added the three individual pieces of code for each sub menu item with each item id see screenshot. It seems to work for two of the drop down items but not the last one. I have checked the menu item id and it is correct.

here is the code in the module css:
#breadcrumbs {min-width: 990px;}
#{$id} LI.ux-menu-item-level-0
{
width: 100px;
}

UL#{$id} LI.ux-menu-item257
{
width: 150px;
}
UL#{$id} LI.ux-menu-item256
{
width: 150px;
}
UL#{$id} LI.ux-menu-item255
{
width: 150px;
}

Now width: 570px is defined for all last menu items in menu.min.css file.

Regards,
ARI Soft

not sure what to do here.