You can have your logo set to any size you want, so it doesn’t have to be 360px width if you need it to be longer. Are you referring to the header widget/sidebar area? If so, the reason it falls off to the side is because the logo and the header widget area are both inside of a div and both exceed the space they’re in. If both of those div’s width exceed the space they’re inside of (in your case 1140px) then one of them will have to fall off due to the lack of space. So if your logo/title area is 300px wide, and your header widget area is 900px (for example) then that would exceed the 1140px width which means they won’t fit on the same line.
So you can have the logo as large as you want, but you’ll need to reduce the header widget area to be smaller if you do so in order for them to fit.
If you’re referring to your primary sidebar (which I assume you are now that I took a look at the code you posted) then you can actually just split that code up like this –
.title-area {
width: 300px;
}
.sidebar-primary {
width: 300px;
}
Then this will allow you to edit one and it not affect the other.