Wordpress Theme and CSS - Problems with menu & Mobile version

After setting a border in the menu with a CSS plugin my menu goes out of the screen in the mobile version of the website (only if I open it, otherwise it is OK).

My website http://ift.tt/1ldoOmZ

My CSS:

.main-nav {
width:1000px;
margin: 0 auto;
background-color: #aa2222;
}
.main-nav > ul > li > a {
font-weight:bold;
font-family:arial;
}
.menu-item-183 {
border-style:solid;
border-color:black;
border-top-width: 1px;
border-bottom: none;
border-left-width: 1px;
border-right: none;
}
.menu-item-184 {
border-style:solid;
border-color:black;
border-top-width: 1px;
border-bottom: none;
border-left-width: 1px;
border-right-width: 1px;
}
.menu-item-185 {
border-style:solid;
border-color:black;
border-top-width: 1px;
border-bottom: none;
border-left: none;
border-right-width: 1px;
}
.menu-item-186 {
border-style:solid;
border-color:black;
border-top-width: 1px;
border-bottom: none;
border-left: none;;
border-right-width: 1px;
}
.menu-item-745 {
border-style:solid;
border-color:black;
border-top-width: 1px;
border-bottom: none;
border-left: none;
border-right-width: 1px;
}
.menu-item-187 {
border-style:solid;
border-color:black;
border-top-width: 1px;
border-bottom-width: 1px;
border-left: none;
border-right-width: 1px;
}
.main-navigation, .main-navigation ul ul {
background-color: #aa2222;
border-style: solid;
border-color: black;
border-width: 1px;
}`

Thank you in advance for any help

via Chebli Mohamed