I need your help to get that lesson as I want to center the h1 with the bottom-border saving the width of the border not to cover the full width?

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="style.css">
    <!-- Image Portfolio Website Using Flexbox-->
<h1>Life with purrfect Cats</h1>
<div class="container">

  <img src="../Image Gallery/Imgs/cat-1-3.jpg" alt="">
  <img src="../Image Gallery/Imgs/gettyimages-709183703.jpg" alt="">
  <img src="./Imgs/mickey-our-cat.jpg" alt="">
  <img src="./Imgs/I141003_153619_1731927oTextCS_70305622.jpg" alt="">
  <img src="../Image Gallery/Imgs/PB097_Blog-Genral-In-Post-800x533px_v1-1.png" alt="">
  <img src="./Imgs/Pngtree—cat-pet-flower_4117841-e1564341946161.jpg" alt="">

h1 {
    font-family: fantasy, Arial, Helvetica, sans-serif;
    font-size: 2.3em;
    border-bottom: 2px solid pink;
    width: 380px;


img {
    width: 450px;
    height: 300px;
    margin: 5px;

    display: flex;    
    flex-wrap: wrap;
    justify-content: center;

closed as off-topic by unor, RockPaperLizard Nov 11 at 3:48

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

Browse other questions tagged or ask your own question.