我正在上網頁設計課，所以我還在學習很多東西，并且在項目中遇到了一些問題。在這個項目中，我們應該創建一個關于我們自己的網頁。我有兩個flex列，我試圖讓它的圖片保持相同的寬度，右邊的about部分填充任何可用的空間。當窗口太小時,“關于”部分應該移到它的下面。現在“關于”部分只是停留在它的下面。

我使用了flex屬性，并在之前將內容放在了我最初想要的旁邊，但在調整了多項內容以保持about部分的最小寬度后，它不再位于圖片旁邊。

@font-face {
  font-family: recharge;
  src: url(../fonts/recharge.woff2);
  src: url(../fonts/recharge.woff);
  src: url(../fonts/recharge.ttf);
}

@font-face {
  font-family: sofachrome;
  src: url(../fonts/sofachrome.woff2);
  src: url(../fonts/sofachrome.woff);
  src: url(../fonts/sofachrome.ttf);
}

body {
  background-image: url("../images/background.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
}

#site {
  margin: 0;
  padding: 0;
}

#banner {
  position: fixed;
  top: 0px;
  height: 150px;
  width: 100%;
  background-color: #000;
}

#logo {
  position: fixed;
  top: 0px;
  height: 130px;
  padding: 12px;
}

header h1 {
  position: fixed;
  left: 80px;
  font-family: sofachrome, sans-serif;
  font-size: 30px;
  color: #FFFFFF;
  padding: 60px 0;
}

nav {
  width: 100%;
  position: fixed;
  top: 150px;
  text-align: center;
  background-image: linear-gradient(#e80000, #7e0000);
  ;
  filter: drop-shadow(0px 0px 10px #FFF);
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
}

nav li {
  font-family: recharge, sans-serif;
  display: inline-block;
  padding: 15px 10px;
}

nav li .active {
  color: #000;
}

nav li a {
  color: #FFF;
  text-align: center;
  text-decoration: none;
  padding: 15px 10px;
}

nav li a:hover {
  color: #000;
  filter: drop-shadow(0px 0px 10px #FFF);
}

#main {
  color: #FFF;
  margin: 210px 200px 10px 200px;
}

#main h1 {
  font-family: recharge, sans-serif;
  font-size: 25px;
}

.container {
  display: flex;
  padding: 15px;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.column-left {
  background-color: rgba(250, 250, 250, .25);
  padding: 15px;
  border-radius: 20px;
  flex-shrink: 0;
}

.column-right {
  background-color: rgba(250, 250, 250, .25);
  padding: 20px;
  border-radius: 20px;
  flex-grow: 1;
  line-height: 1.5em;
  min-width: 390px;
}

.column-right p {
  font-size: 20px;
}

#profilepicture {
  width: 400px;
  padding: 0px;
  border-radius: 15px;
}

footer {
  color: #E80000;
  font-family: recharge, sans-serif;
  font-size: 14px;
  width: 100%;
  text-align: center;
}

footer h1 {
  padding: 1em;
  margin: 0;
}

footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
}

footer li {
  display: inline-block;
  padding: 15px 10px;
}

footer a:hover {
  filter: drop-shadow(0px 0px 10px #FFF);
}

.contact {
  width: 75px;
}

<div id="site">
  <header>
    <section id="banner">
      <img id="logo" src="images/logo.png" alt="Ignite Logo">
      <h1>Austin Bates</h1>
    </section>
    <nav>
      <ul>
        <li>Home</li>
        <li><a href="military.html">Military History</a></li>
        <li><a href="3dmodeling.html">3D Modeling</a></li>
        <li><a href="cad.html">CAD Design</a></li>
        <li><a href="3dprinting.html">3D Printing</a></li>
      </ul>
    </nav>
  </header>
  <section id="main">
    <div class="container">
      <div class="column-left">
        <img id="profilepicture" src="images/profilepicture.jpg" alt="Profile Picture">
      </div>
      <div class="column-right">
        <h1>About Me</h1>
        <p>My name is Austin, and I'm thrilled to share a bit about myself. At the moment, I am a 30-year-old Navy Submarine veteran residing in Orlando, Florida. I'm currently pursuing an Associates degree in Graphic and Interactive Design at Valencia College.
          Alongside my studies, I dedicate my time to working full-time with my brother and his wife, assisting them in their Amazon business. In addition to my professional endeavors, I manage my own Etsy side business specializing in components for
          constructing 3D printers. The world of 3D printing has become my passion, and I devote a significant amount of time to exploring and engaging in various projects related to it. Outside of my professional pursuits, I happily embrace my inner
          nerd. You can often find me engrossed in activities involving my 3D printers or indulging in my geeky interests. Among my favorite obsessions are Dragon Ball, Transformers, Star Wars, Demon Slayer, and Marvel (although I must admit, the recent
          Marvel content hasn't quite lived up to expectations). Although my life's journey has taken a different path than most, particularly at the age of 30, I wholeheartedly believe I am on the right track. I'm excited to witness where this unique
          path leads me and eagerly anticipate the opportunities it brings.
        </p>
      </div>
    </div>
  </section>
  <footer>
    <h2>Contact Me</h2>
    <ul>
      <li>
        <a href="email.html"><img class="contact" src="images/gmail.png" alt="Gmail"></a>
      </li>
      <li>
        <a href="facebook"><img class="contact" src="images/facebook.png" alt="Facebook"></a>
      </li>
    </ul>
  </footer>
</div>