Does rtl.css break headers when activated in a WordPress theme?

I have installed shift WordPress theme. When I change the site to Right to Left, the header is messed up. social icons, search icon and search form are not in right place. menu is messed up and goes to wrong position.

Theme Name: Shift
Theme URI: https://www.competethemes.com/shift/

Below is the rtl.css provided in the theme:

.site-title a, .site-footer a {
  color: white;
}
.site-title a:link, .site-footer a:link, .site-title a:visited, .site-footer a:visited, .site-title a:hover, .site-footer a:hover, .site-title a:active, .site-footer a:active, .site-title a:focus, .site-footer a:focus {
  color: white;
}

.further-reading a, .post-categories a, .post-meta a, .pagination a, .comment-pagination a, .comment-footer .comment-edit-link,
.comment-footer .comment-reply-link {
  font-style: italic;
}
.further-reading a:hover, .post-categories a:hover, .post-meta a:hover, .pagination a:hover, .comment-pagination a:hover, .comment-footer .comment-edit-link:hover,
.comment-footer .comment-reply-link:hover, .further-reading a:active, .post-categories a:active, .post-meta a:active, .pagination a:active, .comment-pagination a:active, .comment-footer .comment-edit-link:active,
.comment-footer .comment-reply-link:active, .further-reading a:focus, .post-categories a:focus, .post-meta a:focus, .pagination a:focus, .comment-pagination a:focus, .comment-footer .comment-edit-link:focus,
.comment-footer .comment-reply-link:focus {
  text-decoration: underline;
}

.post-header,
.post-content,
.after-post-meta, #disqus_thread, .comments, .error404 .search-form-container {
  margin: 1.5em 4.41543%;
}

.search-header, .pagination, .archive-header {
  padding: 1.5em 4.41543%;
  background: #E6E6E6;
}

@media all and (min-width: 56.25em) {
  .post-header,
.post-content,
.after-post-meta, #disqus_thread, .comments, .error404 .search-form-container {
    margin: 1.5em 6.83142%;
  }

  .search-header, .pagination, .archive-header {
    padding: 1.5em 6.83142%;
  }
}
/*===== Basic Styles =====*/
/* apply a natural box layout model to all elements */
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  height: 100%;
  font-size: 100%;
  margin: 0;
  padding: 0;
  font-family: "Lato", sans-serif;
  line-height: 1.5;
  background: #F2F2F2;
  color: #1A1A1A;
  -webkit-font-smoothing: subpixel-antialiased;
  word-wrap: break-word;
  -ms-word-wrap: break-word;
}

.overflow-container {
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: 100%;
}

.loop-container:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

p {
  margin: 1.5em 0;
}

a {
  color: #1A1A1A;
  text-decoration: none;
}
a:link, a:visited {
  color: #1A1A1A;
}
a:hover, a:active, a:focus {
  color: #1A1A1A;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Lato", sans-serif;
  margin: 0;
  padding: 0;
  font-weight: 400;
}

h4, h5, h6 {
  font-size: 1em;
  line-height: 1.5;
}

ul,
ol {
  font-size: 1em;
  padding: 0;
  margin: 1.5em;
}
ul ul, ul ol,
ol ul,
ol ol {
  margin: 0 1.5em;
}

ul ul,
ol ol,
ul ol,
ol ul,
li li {
  font-size: 1em;
}

/* Markup styles */
pre {
  word-wrap: break-word;
  background: #F2F2F2;
  white-space: pre-wrap;
  padding: 0.75em;
}

code {
  background: #F2F2F2;
  padding: 0 0.375em;
}

pre code {
  padding: 0;
}

blockquote {
  margin: 1.5em 0 1.5em 1.5em;
  padding-right: 1.5em;
  border-right: solid 3px #1A1A1A;
}
blockquote cite {
  display: block;
  text-align: left;
}

hr {
  margin: 1.5em 0;
}

/* Table styles */
table {
  border-spacing: 0;
  border-collapse: collapse;
  margin: 1.5em 0;
}

td,
th {
  padding: 0.75em;
  border: solid 1px #1A1A1A;
}

.wp-block-table {
  margin: 0;
}
.wp-block-table thead,
.wp-block-table tfoot {
  background: #F2F2F2;
}
.wp-block-table td,
.wp-block-table th {
  border-color: #E6E6E6;
}
.wp-block-table figcaption {
  margin: -18px 0 0 0;
  color: #1A1A1A;
  text-align: center;
}

.wp-block-table.is-style-stripes {
  border-bottom: none;
}
.wp-block-table.is-style-stripes thead {
  background: none;
}
.wp-block-table.is-style-stripes td,
.wp-block-table.is-style-stripes th {
  border-color: #E6E6E6;
}

/* Images */
.alignleft {
  float: right;
  margin: 0 0 1.5em 1.5em;
}

.alignright {
  float: left;
  margin: 0 1.5em 1.5em 0;
}

.aligncenter {
  text-align: center;
  margin: 1.5em auto;
  display: block;
}

.alignnone {
  margin: 1.5em 0;
}

img,
.alignright,
.alignleft,
.aligncenter,
.alignnone,
.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail,
.wp-block-image {
  max-width: 100%;
  height: auto;
}
img figcaption,
.alignright figcaption,
.alignleft figcaption,
.aligncenter figcaption,
.alignnone figcaption,
.size-auto figcaption,
.size-full figcaption,
.size-large figcaption,
.size-medium figcaption,
.size-thumbnail figcaption,
.wp-block-image figcaption {
  margin: 3px 0 0 0;
  color: #1A1A1A;
  text-align: center;
}

.wp-caption-text,
.gallery-caption,
.wp-caption-dd {
  margin: 3px 0 0 0;
  color: #1A1A1A;
  text-align: center;
}

.wp-block-social-links a {
  color: #fff;
}

.wp-block-group.alignwide,
.wp-block-group .alignwide,
.wp-block-group.alignfull,
.wp-block-group .alignfull {
  line-height: 1.5;
}

/* Form styles */
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=search],
input[type=tel],
input[type=url],
textarea {
  width: 100%;
  font-family: "Lato", sans-serif;
  padding: 10px 12px;
  max-width: 27.75em;
  min-height: 42px;
  background: #F2F2F2;
  color: #1A1A1A;
  border: solid 2px #E6E6E6;
  border-radius: 0;
  -webkit-appearance: none;
  transition: background 0.2s, border-color 0.2s;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=url]:focus,
textarea:focus {
  outline: none;
  background: white;
  border-color: #CCCCCC;
}

textarea {
  max-width: 41.625em;
  overflow: auto;
  /* to hide scrollbar in IE */
}

input[type=submit] {
  font-family: "Lato", sans-serif;
  padding: 12px;
  color: white;
  background: #1A1A1A;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  transition: background 0.2s;
}
input[type=submit]:hover {
  cursor: pointer;
}
input[type=submit]:hover, input[type=submit]:active, input[type=submit]:focus {
  background: #4D4D4D;
}

input[type=search] {
  padding-left: 0.375em;
  /* so safari 'x' doesn't get cut off */
}

::-webkit-input-placeholder {
  color: #666666;
}

:-moz-placeholder {
  color: #666666;
}

::-moz-placeholder {
  color: #666666;
}

:-ms-input-placeholder {
  color: #666666;
}

/* ie image border fix */
a img {
  border: none;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
  html {
    -webkit-text-size-adjust: none;
    /* none for no scaling */
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  html {
    -webkit-text-size-adjust: none;
    /* none for no scaling */
  }
}
.screen-reader-text {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
}

.skip-content {
  position: absolute;
  top: -100%;
  width: 100%;
  right: 0;
  display: block;
  text-align: center;
  color: white !important;
  z-index: 99;
  padding: 1.5em;
  background: #1A1A1A;
  transition: top 0.2s ease-in-out;
}
.skip-content:focus {
  top: 0;
  outline: none;
}

.admin-bar .skip-content:focus {
  top: 32px;
}

.max-width {
  max-width: 1340px;
  margin: 0 auto;
}
.max-width:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.max-width.main-max-width {
  min-height: calc(100vh - 150px);
}

@media all and (min-width: 50em) {
  h1 {
    font-size: 2.375em;
    /* 38px / 16px */
    line-height: 1.342;
    /* 51px */
  }

  h2 {
    font-size: 1.75em;
    /* 28px / 16px */
    line-height: 1.357;
    /* 38px */
  }

  h3 {
    font-size: 1.3125em;
    /* 21px / 16px */
    line-height: 1.143;
    /* 24px */
  }

  h4 {
    font-size: 1.125em;
    /* 18px / 16px */
    line-height: 1.333;
    /* 24px */
  }

  h5, h6 {
    font-size: 1em;
    line-height: 1.5;
  }
}
.archive-header {
  margin-bottom: 1.5em;
}
.archive-header h1 {
  font-size: 1em;
  line-height: 1.5;
}

.more-link {
  display: inline-block;
  color: white;
  background: #1A1A1A;
  padding: 9px 12px;
  transition: color 0.2s, background 0.2s;
}
.more-link:link, .more-link:visited {
  color: white;
}
.more-link:hover, .more-link:active, .more-link:focus {
  color: white;
  background: #4D4D4D;
}
.more-link:hover i, .more-link:active i, .more-link:focus i {
  left: -1px;
}
.more-link i {
  display: inline-block;
  position: relative;
  left: 0;
  margin-right: 3px;
  vertical-align: middle;
  transition: left 0.2s;
}

.post-content .more-link {
  text-decoration: none;
}
.post-content .more-link:hover, .post-content .more-link:active, .post-content .more-link:focus {
  color: white;
}

.more-link-wrapper {
  margin: 1.5em 0;
}

.sticky-status {
  padding: 1px 5px;
  border: solid 2px #E6E6E6;
  color: #666666;
  display: inline-block;
  margin-bottom: 3px;
}

.comment-respond {
  margin: 3em 0;
}
.comment-respond label {
  display: block;
  margin-bottom: 6px;
}
.comment-respond p {
  margin: 1.125em 0;
}
.comment-respond p.comment-notes {
  margin: 1.5em 0;
}
.comment-respond p.form-submit {
  margin-top: 2.25em;
}
.comment-respond .comment-form-cookies-consent label {
  display: inline-block;
}

.comments {
  margin-top: 3em;
}

.comments-number {
  margin: 1.5em 0 3em;
}
.comment-list,
.comment-list .children {
  list-style: none;
  margin: 2.25em 0;
}

.comment-list .children {
  padding-right: 1.5em;
  border-right: solid 1px #F2F2F2;
}

.comment-author {
  margin-bottom: 1.5em;
}
.comment-author .avatar {
  width: 36px;
  height: auto;
  float: right;
  margin-left: 6px;
  border-radius: 50%;
}
.comment-author .author-name {
  line-height: 36px;
}
.comment-author .author-name a {
  font-style: italic;
}
.comment-author .author-name a:hover, .comment-author .author-name a:active, .comment-author .author-name a:focus {
  text-decoration: underline;
}

.comment-content ul,
.comment-content ol {
  margin: 1.5em;
}
.comment-content ul ul,
.comment-content ul ol,
.comment-content ol ul,
.comment-content ol ol {
  margin: 0 1.5em 0 0;
}

.comment-footer .comment-edit-link,
.comment-footer .comment-reply-link {
  position: relative;
  padding-right: 9px;
  margin-right: 4px;
}
.comment-footer .comment-edit-link:before,
.comment-footer .comment-reply-link:before {
  content: "|";
  position: absolute;
  right: 0;
  top: 0;
}

li.comment,
li.pingback {
  margin-bottom: 2.25em;
}
li.comment.bypostauthor > article,
li.pingback.bypostauthor > article {
  border: solid 4px #E6E6E6;
  padding: 0.75em;
}

.comment-pagination {
  margin: 1.5em 0;
}
.comment-pagination p {
  display: inline-block;
  margin: 0 0 0 -4px;
  width: 50%;
}
.comment-pagination .next-comment {
  float: left;
  text-align: left;
}
.comment-pagination:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

@media all and (min-width: 50em) {
  .comments-number h2 {
    font-size: 1.3125em;
    /* 21px / 16px */
    line-height: 1.143;
    /* 24px */
  }
}
.site-footer {
  clear: both;
  margin-top: 3em;
  background: #1A1A1A;
  color: #CCCCCC;
  text-align: center;
}
.site-footer .design-credit {
  padding: 0.75em 6.9425%;
}
.site-footer a {
  text-decoration: underline;
}

.scroll-to-top {
  position: fixed;
  bottom: -45px;
  left: 0;
  z-index: 9;
  background: #1A1A1A;
  border: none;
  color: #fff;
  padding: 12px 0;
  width: 60px;
  transition: background 0.2s, transform 0.3s;
}
.scroll-to-top.visible {
  transform: translateY(-45px);
}
.scroll-to-top:hover {
  cursor: pointer;
  background: #4D4D4D;
}
.scroll-to-top:hover i {
  transform: translateY(-4px);
}
.scroll-to-top i {
  font-size: 21px;
  transition: transform 0.2s;
}

/**
 * 14.2 Galleries
 */
.gallery {
  margin: 2.25em auto;
}

.gallery-item {
  display: inline-block;
  padding: 0.75em;
  text-align: center;
  vertical-align: top;
  width: 100%;
  margin: 0;
}
.gallery-item img {
  max-width: 100%;
  max-height: 100%;
}
.gallery-item a {
  border: none;
}

.gallery-columns-2 .gallery-item {
  max-width: 50%;
}

.gallery-columns-3 .gallery-item {
  max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
  max-width: 25%;
}

.gallery-columns-5 .gallery-item {
  max-width: 20%;
}

.gallery-columns-6 .gallery-item {
  max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
  max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
  max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
  max-width: 11.11%;
}

.gallery-icon img {
  margin: 0 auto;
}

.gallery-caption {
  display: block;
  font-size: 12px;
  padding: 0.5em 0 0;
  margin: 0;
}

.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
  display: none;
}

/* Jetpack Galleries */
.tiled-gallery {
  margin: 2.25em auto !important;
}
.tiled-gallery .gallery-row {
  margin: 0 auto;
}

.site-header {
  background: white;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
}
.site-header:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.title-container {
  position: relative;
  display: inline-block;
  background: #1A1A1A;
  padding: 1.125em 6.9425% 1.125em 1.5em;
  min-height: 60px;
}
.title-container.has-tagline {
  padding-top: 9px;
  padding-bottom: 9px;
}

.site-title {
  display: inline-block;
  font-size: 1em;
  line-height: 1.5;
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
}
.site-title a {
  text-decoration: none;
  transition: color 0.2s;
}
.site-title a:hover, .site-title a:active, .site-title a:focus {
  color: #E6E6E6;
}

.tagline {
  color: #E6E6E6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.social-media-icons {
  list-style: none;
  margin: 1.5em 0 0.75em;
  transition: opacity 0.2s;
}
.social-media-icons li {
  display: inline-block;
  margin-left: 20px;
}
.social-media-icons.fade {
  opacity: 0;
}
.social-media-icons a {
  transition: color 0.2s;
}
.social-media-icons a:hover, .social-media-icons a:active, .social-media-icons a:focus {
  color: #666666;
}

.logo {
  max-width: 100%;
  width: 200px;
  height: auto;
}

@media all and (min-width: 56.25em) {
  .title-container {
    float: right;
    z-index: 19;
    padding-left: 2.25em;
    margin-left: 2.25em;
  }
  .title-container:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: -999px;
    z-index: -1;
    background: #1A1A1A;
  }

  .social-media-icons {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5.554%;
    margin: 0;
  }
  .social-media-icons li:last-child {
    margin-left: 0;
  }
}
@media all and (min-width: 68.75em) {
  .site-header {
    margin-bottom: 0.75em;
  }
}
.pagination {
  text-align: center;
  clear: both;
  margin-bottom: 3em;
}
.pagination a {
  transition: color 0.2s;
}
.pagination .prev,
.pagination .next {
  position: relative;
}
.pagination .prev {
  float: right;
  margin-right: 0;
  padding-right: 10px;
}
.pagination .prev:before {
  content: "«";
  position: absolute;
  right: 0;
}
.pagination .next {
  float: left;
  margin-left: 0;
  padding-left: 10px;
}
.pagination .next:after {
  content: "»";
  position: absolute;
  left: 0;
}
.pagination a,
.pagination span {
  margin: 0 0.75em;
}
.pagination a.current,
.pagination span.current {
  font-weight: 700;
}

@media all and (min-width: 37.5em) {
  .pagination {
    position: relative;
  }
  .pagination.prev, .pagination.next {
    position: absolute;
  }
  .pagination.prev {
    right: 0;
  }
  .pagination.next {
    left: 0;
  }
}
.main {
  margin: 1.5em 2.777%;
}

@media all and (min-width: 56.25em) {
  .main {
    width: 61.094%;
    float: right;
  }

  .left-sidebar .main {
    float: left;
  }

  .page-template-full-width .main {
    width: 100%;
    float: none;
    margin: 1.5em 0;
    padding: 0 2.777%;
  }
}
.toggle-navigation {
  position: relative;
  float: left;
  font-size: 1em;
  line-height: 1.5;
  background: none;
  margin: 0;
  border: none;
  padding: 1.125em 1.5em 1.125em 6.9425%;
}
.toggle-navigation:after {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 32px;
  border: solid 1px #CCCCCC;
  visibility: hidden;
}
.toggle-navigation svg {
  display: inline-block;
  vertical-align: middle;
}
.toggle-navigation svg g {
  fill: #1A1A1A;
}
.toggle-navigation:hover svg g, .toggle-navigation:active svg g, .toggle-navigation:focus svg g, .toggle-navigation.open svg g {
  fill: #666666;
}
.toggle-navigation:hover {
  cursor: pointer;
}
.toggle-navigation:focus, .toggle-navigation.open {
  outline: none;
}
.toggle-navigation:focus:after, .toggle-navigation.open:after {
  visibility: visible;
}

.menu-primary-container {
  background: white;
  max-height: 0;
  margin: 0;
  overflow: hidden;
}
.menu-primary-container .menu-inner-container {
  position: relative;
  padding: 1.5em 6.9425%;
  min-height: 1.5em;
}
.menu-primary-container.open {
  max-height: none;
}

.menu-primary ul {
  margin: 0;
  list-style: none;
}
.menu-primary li {
  margin-bottom: 0.75em;
}
.menu-primary li.current-menu-item > a, .menu-primary li.current_page_item > a, .menu-primary li.current-menu-ancestor > a {
  font-weight: 700;
}

/* Tier 2 */
.menu-primary ul ul {
  max-height: 0;
  overflow: hidden;
  margin-right: 1.5em;
}
.menu-primary ul ul li:first-child {
  margin-top: 0.75em;
}
.menu-primary ul ul li:last-child {
  margin-bottom: 0;
}
.menu-primary .open > ul {
  max-height: none;
}
.toggle-dropdown {
  top: 0;
  font-size: 1em;
  padding: 3px 6px;
  margin: 0;
  border: none;
  background: none;
}
.toggle-dropdown i {
  transition: top 0.2s;
  top: 0;
  left: 0;
}
.toggle-dropdown:hover {
  cursor: pointer;
}

@media all and (min-width: 56.25em) {
  .toggle-navigation {
    display: none;
  }

  .toggle-dropdown {
    font-size: 14px;
    padding: 0;
    margin-right: 3px;
    vertical-align: middle;
  }

  .menu-primary-container {
    position: relative;
    max-height: none;
    overflow: visible;
    height: 60px;
    z-index: 9;
  }
  .menu-primary-container .menu-inner-container {
    position: relative;
    padding: 0 3em 0 5.554%;
    top: 50%;
    transform: translateY(-50%);
  }

  .menu-primary .open > ul {
    opacity: 1;
    visibility: visible;
    top: calc(100% - 2px);
  }
  .menu-primary li {
    display: inline-block;
    margin: 0 0 0 20px;
  }
  .menu-primary li:hover > a:after {
    transform: scale(1);
  }
  .menu-primary li:hover > button i {
    top: 2px;
  }
  .menu-primary a {
    position: relative;
    font-size: 0.75em;
    line-height: 1.5;
  }
  .menu-primary a:after {
    content: "";
    position: absolute;
    bottom: -4px;
    right: 0;
    height: 2px;
    width: 100%;
    background: #E6E6E6;
    transform: scale(0);
    transition: transform 0.2s;
  }
  .menu-primary a:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 4px;
    right: 0;
    width: 100%;
  }
  .menu-primary a:hover:after, .menu-primary a:active:after, .menu-primary a:focus:after {
    transform: scale(1);
  }

  /* Tier 2 */
  .menu-primary {
    /***** Tier 2 *****/
  }
  .menu-primary ul ul {
    position: absolute;
    z-index: 19;
    top: calc(100% + 4px);
    max-height: none;
    overflow: visible;
    background: white;
    margin-right: 0;
    padding: 0 0.75em 1.125em;
    right: 0;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
    border-top: solid 2px #E6E6E6;
    min-width: 5em;
    transition: opacity 0.2s, visibility 0.2s, top 0.2s, right 0.2s;
  }
  .menu-primary ul ul:hover, .menu-primary ul ul.focused {
    opacity: 1;
    visibility: visible;
    top: calc(100% - 2px);
  }
  .menu-primary ul ul li {
    white-space: nowrap;
    margin: 0 0 6px 10px;
  }
  .menu-primary ul ul a {
    width: 100%;
  }
  .menu-primary li {
    display: inline-block;
    margin: 0 0 0 10px;
  }
  .menu-primary li.menu-item-has-children {
    position: relative;
    /***** Tier 3+ *****/
  }
  .menu-primary li.menu-item-has-children > a:hover ~ ul, .menu-primary li.menu-item-has-children > a:active ~ ul, .menu-primary li.menu-item-has-children > a:focus ~ ul {
    opacity: 1;
    visibility: visible;
    top: calc(100% - 2px);
  }
  .menu-primary li.menu-item-has-children > a:hover + button i, .menu-primary li.menu-item-has-children > a:active + button i, .menu-primary li.menu-item-has-children > a:focus + button i {
    top: 2px;
  }
  .menu-primary li.menu-item-has-children ul li {
    display: list-item;
  }
  .menu-primary li.menu-item-has-children ul .menu-item-has-children:hover button i, .menu-primary li.menu-item-has-children ul .menu-item-has-children:active button i {
    left: -2px;
    top: 0;
  }
  .menu-primary li.menu-item-has-children ul .menu-item-has-children button i {
    transition: left 0.2s ease;
    margin-right: 3px;
  }
  .menu-primary li.menu-item-has-children ul .menu-item-has-children > a:before {
    top: 0;
    bottom: 0;
    right: 100%;
    height: 100%;
    width: 36px;
  }
  .menu-primary li.menu-item-has-children ul .menu-item-has-children > a:hover ~ ul, .menu-primary li.menu-item-has-children ul .menu-item-has-children > a:active ~ ul, .menu-primary li.menu-item-has-children ul .menu-item-has-children > a:focus ~ ul {
    opacity: 1;
    visibility: visible;
    top: -12px;
    right: 100%;
  }
  .menu-primary li.menu-item-has-children ul .menu-item-has-children > a:hover + button i, .menu-primary li.menu-item-has-children ul .menu-item-has-children > a:active + button i, .menu-primary li.menu-item-has-children ul .menu-item-has-children > a:focus + button i {
    top: 0;
    left: -2px;
  }
  .menu-primary li.menu-item-has-children ul ul {
    top: -12px;
    right: calc(100% + 4px);
  }
  .menu-primary li.menu-item-has-children ul ul:hover, .menu-primary li.menu-item-has-children ul ul.focused {
    top: -12px;
    right: 100%;
  }
}

The problem is only with header. All other parts looks fine.
When I apply some fixes like

#menu-primary {
  padding-right: 0 !important;
    
}
.social-media-icons {
  text-align: left !important;

    
}


@media all and (max-width: 899px) {

  .site-header .search-form-container button.open + form {
    left: 0 !important;
  }
}
@media all and (min-width: 900px) {

  .search-form-container {
    right: auto !important;
    margin-top: 3px;
  }
}

menu positions moves to correct position but, cannot click menu, hyperlink point is below the text. Search icon and social icon moves to left, but when clicked to search icon, search for is not displaying correctly, it overlaps the search icon and goes out of the page from left. I wonder how can I fully fix this.