Update environments empty state

What does this MR do?

Update environments empty state, according to UX guidelines for paragraph alignment and more in #40468 (closed).

Before	After

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Documentation created/updated
• Tests added for this feature/bug
• Conforms to the code review guidelines
• Conforms to the merge request performance guidelines
• Conforms to the style guides
• Conforms to the database guides

app/assets/javascripts/environments/components/empty_state.vue

@@ -18,27 +18,28 @@ export default {
 };
 </script>
 <template>
-  <div class="blank-state-row">
-    <div class="blank-state-center">
-      <h2 class="blank-state-title js-blank-state-title">
-        {{ s__("Environments|You don't have any environments right now.") }}
-      </h2>
+  <div class="empty-state">
+    <div class="text-content">
+      <h4 class="blank-state-title js-blank-state-title">
+        {{ s__("Environments|You don't have any environments right now") }}
+      </h4>
       <p class="blank-state-text">
         {{ s__(`Environments|Environments are places where
-code gets deployed, such as staging or production.`) }}
-        <br />
+        code gets deployed, such as staging or production.`) }}
         <a :href="helpPath">
           {{ s__("Environments|Read more about environments") }}
         </a>
       </p>
 
-      <a
-        v-if="canCreateEnvironment"
-        :href="newPath"
-        class="btn btn-success js-new-environment-button"
-      >
-        {{ s__("Environments|New environment") }}
-      </a>
+      <div class="text-center">
+        <a
+          v-if="canCreateEnvironment"
+          :href="newPath"
+          class="btn btn-success js-new-environment-button"
+        >
+          {{ s__("Environments|New environment") }}
+        </a>
+      </div>
     </div>
   </div>
 </template>