Error Header Menu

Here is my custom CSS.

#overflow-container
{margin-left: 5%; margin-right: 5%;}

#title-info
{margin-left: 5%;}

#menu-primary ul.social-media-icons
{margin-right: 5%;}

@media all and (min-height: 600px){
.site-header
{position: fixed; width: 100%; z-index: 9999;}
.overflow-container
{padding-top: 60px;}
}

@media (max-width: 800px){
#logo
{margin-right: 36px;}
#toggle-navigation i.fa-bars
{margin-left: 36px;}
}

.menu-primary
{font-family: roboto slab; font-size: 18px; font-weight: 600;}

#site-description
{display: none;}

.social-media-icons i
{font-size: 24px;}

.entry-title, .excerpt-title
{font-size: 24px; font-weight: bold;}

.more-link
{color: #ff0000; font-weight: 600;}

.pagination
{color: #ff0000; font-weight: 600;}

.entry-categories p, .entry-tags p
{font-size: 16px;}

a:link, a:visited, a:hover, a:active
{text-decoration: none;}

#sidebar-primary section.widget .tagcloud
{line-height:28px;
text-align: right;
padding-bottom: 24px;}

I use margin left and right for overflow container
because I want the size smaller and not too width.

Please tell me if there any better code
to make my site look smaller and keep responsive.

Well, it seems there is no space to keep main menu and social menu on the same line.

Do you want it lo look something like:
https://pasteboard.co/1a9hi0Rd.jpg

Hello, Bensita.
Thanks for response.

No, I mean I don’t want my menu going to more than 1 line.

I just want to keep my menu as 1 line (span menu) on standard view.
-> https://ctrlv.cz/wxIA

Or just going to wrap (toggle menu) when they are on mobile view.
-> https://ctrlv.cz/n5DV

So, they are no chance to error or going to more than 1 line.
-> https://ctrlv.cz/U7QL

I also try to modify my code like this.
But still no fix when I reach between 800px to 1030px.

#overflow-container
{width: 80%; margin-left: auto; margin-right: auto;}

#title-info
{margin-left: 10%;}

#menu-primary ul.social-media-icons
{margin-right: 10%;}

@media all and (min-height: 600px){

.site-header
{position: fixed; width: 100%; z-index: 9999;}

.overflow-container
{padding-top: 60px;}}

@media (max-width: 800px){

#logo
{margin-right: 65px;}

#toggle-navigation i.fa-bars
{margin-left: 65px;}}

.menu-primary
{font-family: roboto slab; font-size: 18px; font-weight: 600;}

#site-description
{display: none;}

.social-media-icons i
{font-size: 24px;}

.entry-title, .excerpt-title
{font-size: 24px; font-weight: bold;}

.more-link
{color: #ff0000; font-weight: 600;}

.pagination
{color: #ff0000; font-weight: 600;}

.entry-categories p, .entry-tags p
{font-size: 16px;}

a:link, a:visited, a:hover, a:active
{text-decoration: none;}

#sidebar-primary section.widget .tagcloud
{line-height:28px;
text-align: right;
padding-bottom: 24px;}

.site-footer
{display: none;}

I want my menu just going to wrap (toggle) before going to 2 lines.

Hi Bayu,

With the space available, the social icons can’t fit on the same line as the menu items at those screen sizes. The easiest solution is to temporarily hide the icons with the following CSS for the small range of screen sizes they don’t fit on:

@media all and (min-width: 800px) and (max-width: 970px) {

  .social-media-icons {
    display: none;
  }
}

Thanks for support, Ben. It works.
But I will try to switch to another theme first for a while.