Help with top menu

Hi there!
I have a problem changing the appearance of my top menu in different resolutions as computer screen and phone screen. Pls keep in mind I’m a newbie.
My website is directart.co and my code for it’s topmenu is:

.main{
	width:980px;
	margin:0 auto;
}
.main2{
	border-top: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
}
.main3{
	border-top: 1px solid #ecebeb;
	border-bottom: 1px solid #ecebeb;
	background: #f3f3f3;

}
.main4{
	width:980px;
	margin:0 auto;
	min-height: 30px;
}

The problem is that item ‘My Account’ is always out of the grey section on size for phone.
Can you help me?