元素超出其定义的宽度

我试图使我的顶部菜单始终保持屏幕完全宽度。遗憾的是, 尽管它在台式机上可以正常工作, 但在移动设备上时, 它一直在扩展超出预期的宽度。

提供一些背景信息：我正在尝试构建”菜鸟”主题的子主题(https://wordpress.org/themes/rookie/)。我现在的目标是将主题的默认菜单替换为顶部栏, 在该栏上我希望左侧的汉堡菜单, 中间的徽标和右侧的搜索按钮。

这已经完成了, 但是由于我不明白的原因, 在移动设备上进行测试时, 顶部栏超出了预期的100％宽度。尝试使用Chome开发工具的” Phone 6/7/8″时, 可以观察到这一点。我也尝试过使用物理设备, 但结果相同。该页面为https://gornik2.kosimus.eu/

来自开发工具的图片

我花了几个小时试图弄清楚这一点, 而此时我基本上没有想法了。我将宽度定义为100％, 100vw, 依此类推, 尝试了最大宽度, 检查了父元素, 并确保宽度没有在任何地方增加。

可以肯定的是, 我确实缺少一些愚蠢的小东西。想法将不胜感激。

谢谢！

PS在该页面上还有很多其他问题(颜色等-请忽略这些问题)。

/* Make sure that the header is full-width */
.site-header {
    width: 100%;
}

#masthead {
    width: 100%;
    }

/* Get rid of the horizontal unordered list menu. Always use the mobile-like hamburger menu. */
.main-navigation ul {
    display: none;
}

.main-navigation.toggled .nav-menu {
    display: block;
    background: #000000;
}

.main-navigation li {
    float: none;
}

/* Menu bar to the top */
.main-navigation {
    display: block;
    position: fixed;
    top: 0;
    height: 65px;
    width: 100%;
}

/* As the top bar is 65px high, the open menu should have exactly that margin, so that they don't overlap */
.main-navigation.toggled .nav-menu {
    margin-top: 65px;
}

/* Display navigation over other stuff */
#site-navigation {
    z-index: 100;
}

/* Top bar styling */

/* Hamburger menu */
.main-navigation .menu-toggle {
    /*Send the whole button to the left*/
    display: inline-block;
    width: 20vw;
    height: 65px; /* Set the height of the whole top bar to 65 pixels */
    background: #ffffff;
    position: fixed;
    top: 0;
    left: 0;

}

.main-navigation .menu-toggle .dashicons {
    display: inline-block;
    color: #000000;   
    position: relative;
    left: 27%; /*Required to be positioned properly on the white bg*/
    font-size: 4rem;
    vertical-align: baseline;
}

/*White BG for the hamburger button*/
.main-navigation.toggled .menu-toggle {
    background: #ffffff;    
}

/* We're using the full screen search from a plugin, so the field here is not necessary */
.main-navigation .search-form .search-field {
    display: none;
}

/* Search button */
.main-navigation .search-form .search-submit {
    display: inline-block;
    width: 20vw;
    height: 65px;
    background: #ffffff;
    color: #000000;
    position: fixed;
    top: 0;
    right: 0;
    padding: 8px 16px;
}

.main-navigation .search-form .search-submit:hover {
    background: #ffffff;
    color: #000000;
}

.main-navigation .search-form {
    display: inline-block;
    margin: 0;
}

.main-navigation {
    background-color: #1a754a;
}

/* Logo centering and styling */
.site-branding {
    display: inline-block;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: calc(50% - 32.5px);
    z-index: 110;
}

.site-logo {
    margin: 0px;
    float: none;
}

.site-logo img {
    max-height: 65px;
}

.site-content {
    margin-top: 65px;
}

#1

添加到LEAGUE TABLE的th标签中的伪元素(：after)导致了此问题。如果位置值从”绝对”更改为”相对”, 则可以解决此问题。

.sp-data-table .sorting:after {
      content: "\f156";
   color: transparent;
   /* position: absolute; */
   position: relative;
} 

屏幕截图