Photo Banner now presenting correctly with image fitting and text in center

PortfolioPage/Shared/NavMenu_v2.razor

@@ -1,4 +1,5 @@
-<nav class="navbar">
+
+<nav class="navbar">
 
     <div class="navbar-header">
         <a class="navbar-brand m-3 override-brand" href="\">Kira Jiroux</a>
@@ -38,3 +39,6 @@
 
 </nav>
 
+
+
+

PortfolioPage/Shared/NavMenu_v2.razor.css

@@ -44,3 +44,31 @@ a.override-brand {
     background-color: white;
 }
 
+
+
+.container {
+    position: relative;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+    top: 0;
+    max-width: 100vw;
+    height: 660px;
+    /*
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    */
+    border-bottom: 3px solid hotpink;
+    border-top: 3px solid hotpink;
+}
+
+.center {
+    margin: auto;
+    text-align: center;
+    width: 50%;
+    padding: 70px 0;
+    font-size: 100px;
+    color: white;
+    border: 1px dashed hotpink;
+}

PortfolioPage/Shared/PhotoBanner.razor

@@ -1,6 +1,6 @@
 <div class="container">
-    <img src="@photoUrl" class="photo-banner" />
-    <div class="title">@title</div>
+  <img src="@photoUrl" style="width:100%; height: 600px;">
+  <div class="centered">@title</div>
 </div>
 
 @code {

PortfolioPage/Shared/PhotoBanner.razor.css

@@ -1,29 +1,30 @@
 body {
 }
 
-.container{
+.container {
     position: relative;
     text-align: center;
     margin: 0;
     padding: 0;
     top: 0;
-    width: 100%;
-    height: 660px;
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
+    max-width: 100vw;
+    
+    
+    border-bottom: 3px solid hotpink;
+    border-top: 3px solid hotpink;
 }
 
-.photo-banner {
-    width: 100vw;
-    max-height: 660px;
-}
 
-.title {
+
+/* Centered text */
+.centered {
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(10%, -50%);
+    transform: translate(-50%, -50%);
     font-size: 100px;
     color: white;
 }
+
+
+