I would like width of the title bar, image, and thumbstrip below to be the same. Is there a way I can guarantee this?
In a word, no. The skin is only what I call "semi-responsive," which leads to the variability you're seeing.
Let's start with the title bar. If you set it to a percentage width, like 95%, it will always be 95% of the width of the browser window, no matter how large. So, on a monitor that's 30" wide, with a maximized browser window, it will be 28.5" wide. There's a lower limit, determined by the thumbnail table - on a small display, Matrix won't wrap the rows of thumbnails, so you'll eventually hit a point at which you get a horizontal scrollbar. If, instead, you set the titlebar to a fixed width, like 900px, that's the width it will always be, no matter what. In short, the thumbnail page is not fully responsive to the size of the browser window.
But now let's look a the large images. There
are fully responsive, but with an upper limit, rather than a lower one. If you set the image bounds to, say, 1200x750, the large images will always be shown at 1200px wide (if the image is actually that wide, of course), as long as the browser window is big enough to handle it. On a smaller monitor, the image will be shrunk so that it always still fits in the in browser window. But on that 30" monitor, it will never be any wider than 1200px, no matter what. The thumbstrip is also responsive to the width of the browser window, but it uses as much space as it can.
Let's say you set the titlebar to a fixed 1200px, and set the image bounds to 1200x750. On a large display, the titlebar and the large image will be the same width. But on a smaller display, the titlebar will still be 1200px wide, but the image may be shown at 1080x675, so that it still fits.
So what you've got are two very different display mechanisms at work. There's really no way to make them always synchronize.