Google displaying website title differently in search results

Google displays my website’s page title differently to how it is meant to be.

The page title should be:

Graphic Designer Brighton and Lewes | Lewis Wallis Graphic Design

It displays fine in Bing, Yahoo and on my actual website.

However, Google displays it differently:

Lewis Wallis Graphic Design: Graphic Designer Brighton and Lewes

This is annoying as I want my keywords "graphic designer brighton" to go before my name.

I am using the Yoast SEO plugin and my only suspicion is that there might be a conflict between that and my theme, Workality.

Has anyone got any suggestions as to why this might be happening?

Google Search may change webpage titles they show in the result page (since 2012-01):

We use many signals to decide which title to show to users, primarily the <title> tag if the webmaster specified one. But for some pages, a single title might not be the best one to show for all queries, and so we have algorithms that generate alternative titles to make it easier for our users to recognize relevant pages.

See also the documentation at http://support.google.com/webmasters/bin/answer.py?hl=en&answer=35624:

Google's generation of page titles and descriptions (or "snippets") is completely automated and takes into account both the content of a page as well as references to it that appear on the web. The goal of the snippet and title is to best represent and describe each result and explain how it relates to the user's query.

[…]

While we can't manually change titles or snippets for individual sites, we're always working to make them as relevant as possible.

In my answer on Webmasters SE I linked to questions from people having the same issue.