diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php
index f8d056ef93..2514fa3f92 100644
--- a/apps/files_sharing/templates/public.php
+++ b/apps/files_sharing/templates/public.php
@@ -35,7 +35,7 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
 
 
 <header><div id="header" class="<?php p((isset($_['folder']) ? 'share-folder' : 'share-file')) ?>">
-		<div id="header-left">
+		<div class="header-left">
 			<span id="nextcloud">
 				<div class="logo logo-icon svg"></div>
 				<h1 class="header-appname">
@@ -48,7 +48,7 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
 		</div>
 
 		<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
-		<div id="header-right">
+		<div class="header-right">
 			<?php if (!isset($_['hideFileList']) || (isset($_['hideFileList']) && $_['hideFileList'] === false)) {
 				if ($_['server2serversharing']) {
 					?>
diff --git a/core/css/header.scss b/core/css/header.scss
index 41bb578309..e744d3acb4 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -137,18 +137,18 @@
 		vertical-align: middle;
 	}
 
-	#header-left,
-	#header-right {
+	#header-left, .header-left,
+	#header-right, .header-right {
 		display: inline-flex;
 		align-items: center;
 	}
 
-	#header-left {
+	#header-left, .header-left {
 		flex: 0 0;
 		flex-grow: 1;
 	}
 
-	#header-right {
+	#header-right, .header-right {
 		justify-content: flex-end;
 	}
 }
diff --git a/core/js/js.js b/core/js/js.js
index 2aa7bf1bc5..c02ef5c792 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -1203,7 +1203,7 @@ OC.Notification={
 
 	/**
 	 * Updates (replaces) a sanitized notification.
-	 * 
+	 *
 	 * @param {string} text Message to display
 	 * @return {jQuery} JQuery element for notificaiton row
 	 */
@@ -1512,7 +1512,7 @@ function initCore() {
 
 	var resizeMenu = function() {
 		var appList = $('#appmenu li');
-		var headerWidth = $('#header-left').width() - $('#nextcloud').width()
+		var headerWidth = $('.header-left').width() - $('#nextcloud').width()
 		var usePercentualAppMenuLimit = 0.33;
 		var minAppsDesktop = 8;
 		var availableWidth = headerWidth - $(appList).width();
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index 337032ab66..6b9db9389b 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -31,7 +31,7 @@
 		<div id="notification"></div>
 	</div>
 	<header role="banner"><div id="header">
-			<div id="header-left">
+			<div class="header-left">
 				<a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
 					id="nextcloud" tabindex="1">
 					<div class="logo logo-icon">
@@ -96,7 +96,7 @@
 
 			</div>
 
-			<div id="header-right">
+			<div class="header-right">
 				<form class="searchbox" action="#" method="post" role="search" novalidate>
 					<label for="searchbox" class="hidden-visually">
 						<?php p($l->t('Search'));?>