Menu problem in the mobile version

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

My website http://www.gabriellacipriani.it

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;
}
.sidebar .widget {
background-color: #f4f4f4;
}
.inside-navigation.grid-container.grid-parent {
color: #aa2222;
background-color: #aa2222;
}
.main-navigation, .main-navigation ul ul {
background-color: #aa2222;
border-style: solid;
border-color: black;
border-width: 1px;
}
.site-info {
background-color: #aa2222;
}
.sidebar .widget .widget-title {
color: #aa2222;
font-style: italic;
}
#sidebar ul.perfect-quotes li, ul.perfect-quotes li {
font-size: 14px;
}

Thank you in advance for any help

Marco