diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index 8871a069d5d..d9267f5cdf3 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -162,17 +162,14 @@
  * Last push widget
  */
 .event-last-push {
-  overflow: auto;
   width: 100%;
+  display: flex;
+  align-items: center;
 
   .event-last-push-text {
     @include str-truncated(100%);
-    padding: 4px 0;
     font-size: 13px;
-    float: left;
-    margin-right: -150px;
-    padding-right: 150px;
-    line-height: 20px;
+    margin-right: $gl-padding;
   }
 }
 
diff --git a/app/views/projects/_last_push.html.haml b/app/views/projects/_last_push.html.haml
index 6f5eb828902..6a1035d2dc7 100644
--- a/app/views/projects/_last_push.html.haml
+++ b/app/views/projects/_last_push.html.haml
@@ -13,6 +13,6 @@
 
         #{time_ago_with_tooltip(event.created_at)}
 
-      .pull-right
+      .flex-right
         = link_to new_mr_path_from_push_event(event), title: _("New merge request"), class: "btn btn-info btn-sm qa-create-merge-request" do
           #{ _('Create merge request') }
diff --git a/changelogs/unreleased/44382-ui-breakdown-for-create-merge-request.yml b/changelogs/unreleased/44382-ui-breakdown-for-create-merge-request.yml
new file mode 100644
index 00000000000..dd8c0b19d5f
--- /dev/null
+++ b/changelogs/unreleased/44382-ui-breakdown-for-create-merge-request.yml
@@ -0,0 +1,5 @@
+---
+title: Fix UI breakdown for Create merge request button
+merge_request: 17821
+author: Takuya Noguchi
+type: fixed