您必须使用flex-direction: row;为行（徽标+标题）创建一个容器，并将.container布局更改为flex-direction: column;。
我得到的结果是：My result

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-size: 15px;
    font-family: "Times New Roman", Times, serif;
}

.container {
    margin: 50px auto 0;
    border: 2px black solid;
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column; /* First layout: column */
}

.row {
    display: flex;
    flex-direction: row; /* Second layout: row */
}

.header {
    text-align: center;
    justify-content: center;
    margin: auto;
    font-size: 15px;
}

.heading {
    border-top: 2px solid black;
    text-align: center;
}

<div class="container"><!-- column layout -->
    <div class="row"><!-- row layout -->
        <div class="logo">
            <img src="css/logo.png" height="125px" width="125px" id="logo_img" alt="" />
        </div>

        <div class="header">
            <h3>
                DEPARTMENT OF FORENSIC MEDICINE <br />
                POST GRADUATE INSTITUTE OF MEDICAL EDUCATION AND <br />
                RESEARCH,CHANDIGARH
            </h3>
        </div>
    </div>

    <div class="heading">
        <h3>Forensic Toxicology Laboratory</h3>
    </div>
</div>

另一种解决方案是使用CSS Grid layout将.container设置为2 × 2网格，然后将徽标，标题和标题放置为grid-row和grid-column。

这是您可以遵循的一种方法，在代码中添加解释性注解：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 15px;
  font-family: 'Times New Roman', Times, serif;
}

.container {
  margin: 50px auto 0;
  border: 2px black solid;
  width: 90%;
  height: auto;
  display: flex;
  /* setting a gap between adjacent elements in the flex layout: */
  gap: 1rem;
  /* shorthand, to set:
       flex-direction: row;
       flex-direction: wrap; */
  flex-flow: row wrap;
}

.header {
  text-align: center;
  justify-content: center;
  margin: auto;
  font-size: 15px;
}

.heading {
  /* setting the flex-basis of the element to take 100% of the
     available space; effectively forcing it to take the
     entirety of a 'line,' and therefore forcing it to the next
     line of the layout: */
  flex-basis: 100%;
  justify-content: start;
}

hr {
/* setting the size of the element (the "thickness") */
block-size: 0.1rem;
/* setting the background-color to take the color: */
background-color: currentColor;
color: black;
/* setting the element to base its inline-size to be on 80%
   of the available space: */
flex-basis: 80%;
/* centering the element on the inline-axis: */
margin-inline: auto;
}

h3 {
  padding-block: 2rem;
  text-align: center;
}

<div class="container">

  <div class="logo">
    <img src="css/logo.png" height="125px" width="125px" id="logo_img" alt="">
  </div>

  <div class="header">
    <h3>DEPARTMENT OF FORENSIC MEDICINE <br> POST GRADUATE INSTITUTE OF MEDICAL EDUCATION AND <br> RESEARCH,CHANDIGARH</h3>
  </div>

  <hr>
  <div class="heading">
    <h3>Forensic Toxicology Laboratory</h3>
  </div>
</div>

参考文献：

• block-size。
• CSS logical properties。
• display。
• flex-basis。
• flex-direction。
• flex-flow。
• flex-wrap。
• gap。
• column-gap。
• row-gap。
• inline-size。
• margin-block。
• margin-inline。