元素超出其定义的宽度

我试图使我的顶部菜单始终保持屏幕完全宽度。遗憾的是, 尽管它在台式机上可以正常工作, 但在移动设备上时, 它一直在扩展超出预期的宽度。
提供一些背景信息:我正在尝试构建” 菜鸟” 主题的子主题(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; }

【元素超出其定义的宽度】屏幕截图

    推荐阅读