adjustable header.home page.

src/containers/App/App.css

@@ -103,7 +103,14 @@ footer a:hover {
   background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */
 }
 
-.px100 {
-font-size: 100px;
-color: #72d6b0;
+
+.custom-header {
+  
+  width: 100vw;
+  height: 200px;
+  background-image: url('/src/asset/img/miami.jpg'); /* 背景图片路径 */
+  background-size: cover;        /* 使背景图片覆盖整个容器 */
+  background-position: center;   /* 居中对齐背景图片 */
+  background-repeat: no-repeat;  /* 防止背景图片重复 */
+  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */
 }

src/containers/App/App.tsx

@@ -35,8 +35,8 @@ const App = () => {
               path={path}
               element={
                 <>
-                  <Header title={title || ""} lead={lead || ""} />
-                  <div className="container">
+                  {/* <Header title={title || ""} lead={lead || ""} /> */}
+                  <div className="container-fluid">
                     <Component />
                   </div>
                 </>

src/contents/home.tsx

@@ -5,17 +5,14 @@ export function Home() {
 
   return (
     <>
-      <div className="container">
+      <div className="custom-header left-align"></div>
+      <div className="container-fluid">
       <div className="row justify-content-center bg-rice_yellow ">
-        <div></div>
-
-
-
-
+        
         <div className="col-md-8">
           <div className="row justify-content-center h1">Promotion Video</div>
-            <div className="embed-responsive embed-responsive-16by9">
-              <video className="embed-responsive-item" controls>
+            <div className="embed-responsive embed-responsive-16by9 row">
+              <video className="embed-responsive-item justify-content-center" controls>
                 <source src={"https://static.igem.org/peertube/streaming-playlists/hls/b8667885-e1be-48b2-ab9b-d1aac71db0da/e35183e1-c8b5-45b0-a83a-d2b98dcb6996-480-fragmented.mp4"} type="video/mp4" />
                 Your browser does not support the video tag.
               </video>