diff --git a/app/assets/stylesheets/avalon/_playlists.scss b/app/assets/stylesheets/avalon/_playlists.scss
index e264a73d1f..3846265bdc 100644
--- a/app/assets/stylesheets/avalon/_playlists.scss
+++ b/app/assets/stylesheets/avalon/_playlists.scss
@@ -25,7 +25,6 @@
 }
 
 .playlist-title {
-  margin: 20px 0 10px;
   display: flex;
   align-items: center;
 
@@ -36,10 +35,15 @@
   // Assuming this span is an icon
   span {
     font-size: 2rem;
-    padding: 0 1rem;
+    padding: 0 1rem 0 0;
   }
 }
 
+.playlist-title-wrapper {
+  width: 100%;
+  margin: 20px 0 10px;
+}
+
 .playlist-action-button-row.col-sm-4 {
   padding-left: 0.75rem;
   padding-right:0px;
diff --git a/app/views/playlists/show.html.erb b/app/views/playlists/show.html.erb
index d2ee48b857..b62fb4d033 100644
--- a/app/views/playlists/show.html.erb
+++ b/app/views/playlists/show.html.erb
@@ -16,8 +16,8 @@ Unless required by applicable law or agreed to in writing, software distributed
 <% @page_title = t('media_objects.show.title', :media_object_title => @playlist.title, :application_name => application_name) %>
 
 <div class="playlist-view-wrapper row">
-  <div class="page-title-wrapper playlist-title col-sm-12">
-    <div class="col-sm-8">
+  <div class="page-title-wrapper playlist-title-wrapper row">
+    <div class=" playlist-title col-sm-8 pl-0">
       <%= icon_only_visibility @playlist.visibility %>
       <h1 class="page-title"><%= @playlist.title %></h1>
     </div>
@@ -27,7 +27,7 @@ Unless required by applicable law or agreed to in writing, software distributed
     </div>
   </div>
 
-  <div class="col-sm-12">
+  <div class="col-sm-12 px-0">
     <%= react_component("PlaylistRamp",
       {
         base_url: request.protocol+request.host_with_port,