Ok, I am trying to replicate the side navbar as seen here in this website. Watch how it reacts when you reduce the width of your screen. Now watch how mine reacts. The text crumbles as if it is fighting the image to it’s left and the slider to the right. I think I may be stacking them wrong. Any suggestions? Thank you.
change your left padding to something smaller
Thank you very much PixelGeek. That did the trick with the text falling apart. Big improvement!!
My image of those fading bars though doesn’t seem to want to stay in its relative place - below the yellow logo box. Any idea why?
your bars have a margin-left of 354px. make that smaller.
suggestion: you might want to redo your whole element structure. Things can get crazy the more you go on with the way you have it setup.
have a 2-col row. left column will be the nav, right will be the main content. you don’t need 3 columns.
I tried making it smaller but then when viewing it in preview mode the bars are off to the left on my desktop screen I want to aligned those bars under that yellow logo box at least when viewed on most desk top or tablet devices.
Yes, you are right. I should get rid of that third column. It is going to haunt me later I am sure. We do it now.
But this won’t solve the three bar issue 
For anyone who may encounter these two problems I solved it by first cropping my logo image so there was no extra space to rt or lft. I then put everything into a div block inside the column and sized the div block to the width of the image. I inserted the text links as block items and right justified them. To make the 3 graphic bars stay aligned with the left edge of the logo I reordered things making the 3 bar image the last item in the div block and made it an “inline block” item. Finally, I manually adjusted the margins to place it where I wanted.