Pages Overlapping On Ipad

Hi Everyone,
I’m completely new at CSS and have basically been learning as I go along. I’ve been doing lots of reading and research, but like I said I’m a total novice.

I’ve been having a few issues with my blog/site and hope you can help me out.
Right now, I have my pages set up in circles across the top of the site. Before, I was having no issues with the layout on my ipad, but now whenever I look at the blog there, the circles have sort of jammed together over the center of the header image, and the “recipes” redirect is now right under the “about me”.

I’ve been using Jetpack and know that my code is probably a mess, but any help would be greatly appreciated.

Here is the page: http://www.madebyshell.com

Thanks,

Michelle