First you need to coordinate the widths of the major containers like #content so there’s physical room for the sidebar. Use percentage widths to maintain responsiveness. Once #content has the right width (try 73%), the inner container #primary can be 100% width. Finally, remove the clear: both; style from #content or the sidebar will never be adjacent no matter how much room you leave for it.
Whatever partial width you arrive at for #content needs to be restored to 100% in one of the media queries when it is appropriate for sidebar content to occur below due to screen width.
]]>