Unfortunately, it turns out that all CSS settings for width are overridden by an entry in the relevant .ascx (web control) file in the skins folder "site name"/Portals/_default/skins/"your skin" folder.

To determine the correct skin folder and ascx file to alter, login as the administrator to your site and go to Admin / Site Settings. From there look at the "Portal Skin" setting in the "Apperance" section. This will tell you which skin you chose (DNN Gray, or DNN Blue or whatever) and the file to edit ("Horizontal Menu Full Width, or Horizontal Menu Fixed Width" or whatever.)

So in that path (site name"/Portals/_default/skins/"your skin" - where your skin is determined above) open the appropriate menu .ascx file.

In my case that was "Horizontal Menu - Full Width.ascx".  This file sets up all the tables with various placeholder fillers etc.  About half way down there is a table row element (<TR>) with the spacer.gif image and width, hard coded to 150px.

This means, altering CSS will not reduce the panes down the left to anything less that 150px. Once this width was changed - or completely removed. all is good.