Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:
In the 480px max-width media query I’m trying to change the size of the image to a larger size. height works but width won’t change.

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" href="styles.css"/>
  <link rel="stylesheet" href="https://fontawesome.com/6.1.2"/>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
  <title>My Portfolio</title>
</head>
<header>
  <nav id="navbar">
    <ul>
      <a href="#welcome-section"><li>About</li></a>
      <a href="#projects"><li>Work</li></a>
      <a href="#contact"><li class="third">Contact</li></a>
    </ul>
  </nav>
</header>
<body>
  <div id="welcome-section">
    <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage" target="_blank" id="profile-link"><h1><center>Hey I'm Travis</center></h1></a>
    <h3 class="web-dev"><center>A web developer</h3>
    
  </div>
  <div id="projects">
    <h2 class="mine">
       These are some of my projects 
    </h2>
    <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" class="projects"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg"  /><h3 class="subtitle">Tribute Page</h3></a>
    <a href="https://codepen.io/freeCodeCamp/full/wgGVVX" class="projects"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"><h3 class="subtitle">Calculator</h3></a>
    <a href="https://codepen.io/freeCodeCamp/full/mVEJag" class="projects project-3"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg"><h3 class="subtitle">World Map</h3></a>
  </div>
  <div id="contact">
    <h1><center>Let's work together...</h1>
    <h3><center>How do you take your coffee?</h3>
    <div>
    <p><span class="material-icons">facebook</span> Facebook</p>
    <p><span class="material-icons">@</span> Send a mail</p>
    <p><span class="material-icons">smartphone</span> Call me</p>
    </div>
  </div>
</body>
<footer>
  <h3 class="copyright">&copy 2022</h3>
</footer>
</html>
/* file: styles.css */
ul, li {
display: flex;
float: right;
margin: 0;
font-family: Sans-serif;
padding: 10

}
header {
position: fixed;
top: 0;
width: 100%;
height: 34;
right: 0;
background: #9b0000;
margin: 0;
padding: 4 0 4 0
}
h1 {
font-family: Sans-serif;
font-style: bold; 
}
h2 {
font-family: Arial
}
h3 {
font-family: sans;
font-weight: 10;
font-style: italic
}
body {
margin: 70 30;
align-items: center
}
.third {
margin-right: 20;
}
li:hover {
background: darkblue;
}
li {
margin-top: -10;
margin-bottom: -10;
color: black;
}
body {
background: black;

}
h1, h2, h3 {
color: white;

}
.web-dev {
color: #9b0000
}
#projects {
margin-right: ;
background: #6699CC;
padding-left: 30;
margin-left: ;
padding-top: 90;
padding-bottom: 330;

}
footer {
border-top: 4px solid red;
margin-right: -30;
margin-left: -30;
margin-top: 90
}
.material-icons, p {
color: white;
float: left;
padding-left: 7;
margin-bottom: 30;
 
}
.projects {
float: left;
text-align: center;
padding-left: 43;

}
.mine {

text-align: center;
text-underline-offset: 7px;

margin: -50 0 5 0;
padding-top: 0;
padding-bottom: 30;
text-decoration: underline; 
 
}
img {
object-fit: cover;
width: 300;
height: 200
}
html {
scroll-behavior: smooth
}
.copyright {

text-align: center;
margin-top: 40
}

@media (max-width: 480px) {
#projects {
margin-right: -30;
background: #6699CC;
padding-left: 30;
margin-left: -30;
padding-top: 90;
padding-bottom: 800;
text-align: center;
}
img {
   width: 800;
   height: 400;
   
}
}
@media (max-width: 900px) {
img {
  width: 230;
  margin-left: -50;
  padding-right: 34;
  
}
.project-3 {
  margin-right: -20
}
.subtitle {
  margin-left: -78
}
}
#welcome-section {
padding: 147 0
}


  **Your browser information:**

User Agent is: Mozilla/5.0 (X11; CrOS aarch64 14695.85.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

Did you try to experiment with object-fit?

Your query doesn’t change it at all, that may be a problem.

If you, by any chance, have this project on codepen, feel free to share a link, I would take a look at it in that environment.

I did try object-fit but it ended up making the image smaller.