Desktop Header Responsive Logo and Page Width

How can I make my desktop view go to 1024 min pixels without the menu names overlapping my logo? I have already pushed everything to the right and removed the search icon for additional room? I noticed that the enfold theme demo is about the same size and works properly. Currently I have added the following css code and my web site is mentioned in private

font-size: 20px;
font-weight: bold;
text-align: center;
}

.content, .sidebar {
padding-top: 10px;
padding-bottom: 10px;}
body { font-size: 16px; }

.phone-info span { font-size: 16px; }

.main_menu .menu ul { width: 235px; }

#top div .avia-gallery img { border-style: none; padding: 0; }

@media only screen 
 and (min-width: 768px) 
 and (max-width: 1023px) {
.container #advanced_menu_toggle, #advanced_menu_hide {
display: block;
}
.main_menu .avia-menu, #header_main_alternate, .fallback_menu {
display: none;
}}

@media only screen
  and (min-width: 768px)
  and (max-width: 1023px) {
ul.noLightbox.social_bookmarks.icon_count_4 {
left: -60px;
display: block;
}}

#input_1_33_other {
width: auto !important;
}

select.ui-datepicker-month, select.ui-datepicker-year {
width: 35% !important;
display: inline !important;
}

input.datepicker {
display: inline !important;
}

.mfp-title {
display: none !important;
}