Why do CSS div dimensions differ from Devtools dimensions? - css

Question

I am testing responsiveness in my react app and I have come across a pretty confusing issue while working with my devtools console. The width of the element I am working with is 768px. These are the same dimensions for a tablet screen. However, the element width only covers part of the screen as shown in the screenshot below.
Where is this extra space on the right coming from? I believe the element should cover the entire width of the screen since the dimensions are equal. I have also in my CSS file:
html, body {
margin: 0;
padding: 0;
}
My full CSS file looks like this:
#import url("https://fonts.googleapis.com/css?family=Akaya+Telivigala&display=swap");
.projects {
display: inline-block;
width: 500px;
font-size: 1.7em;
color: white;
width: 100%;
height: 100vh;
}
.indivProject {
display: grid;
grid-template-columns: 900px 120px;
}
.projImage img {
width: 450px;
height: 450px;
margin-top: 150px;
}
#media screen and (min-width: 320px) {
.projects {
width: 100%;
margin-left: 60px;
height: 100%;
}
}
#media screen and (min-width: 768px) {
.projects {
width: 100%;
margin-left: 60px;
height: 100%;
}
}
.project-text {
color: white;
font-size: 0.8em;
margin-left: 180px;
margin-top: 240px;
}
.tech {
margin-left: 250px;
font-size: 0.7em;
color: rgb(9, 150, 79);
}
#media screen and (min-width: 320px) {
.project-text {
margin-left: 80px;
font-size: 1.7em;
width: 100%;
}
}
#media screen and (min-width: 768px) {
.project-text {
text-align: center;
}
}
#media screen and (min-width: 320px) {
.projImage img {
display: none;
}
}
a {
text-decoration: none;
color: rgb(9, 150, 79);
}
a:hover {
color: saddlebrown;
}
h4 {
color: rgb(15, 89, 102);
text-align: center;
font-size: 1.2em;
}
The corresponding markup looks like this:
import React from 'react';
import './styles.css';
import nutri from '../../images/nutri.png';
import akan from '../../images/akan.png';
import convo from '../../images/convo.png';
function Projects(){
return (
<div className="projects">
<h4>HIGHLIGHTED PROJECTS</h4>
<div data-aos="zoom-out" className="indivProject">
<div data-aos="zoom-out" className="project-text">
<p>
<h3>TEXTR</h3>
This is a mobile-responsive messaging app built using React and leverages the use of ChatEngine to provide an interactive communication experience. Hosted on Netlify.
</p>
<ul className="tech">
<li>React</li>
<li>Chat Engine</li>
<li>React Testing Library</li>
</ul>
</div>
<div className="projImage"><img src={convo} alt=""></img></div>
</div>
<div data-aos="zoom-out" className="indivProject">
<div data-aos="zoom-out" className="project-text">
<p>
<h3>NUTRIAPP</h3>
This is an application that acts more like a remote doctor. By inputing some personal data such as Weight, Height and Physical activity, the user reveives ther caloric intake recommendation and is able to evaluate their health status.
</p>
<ul className="tech">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div className="projImage"><img src={nutri} alt=""></img></div>
</div>
<div data-aos="zoom-out" className="indivProject">
<div data-aos="zoom-out" className="project-text">
<p>
<h3>AKAN NAMES</h3>
Akan names are derived from Ghanian culture. Frequently in Ghana, children are given their first name as a 'day name' which corresponds to the day in the week they were born. This application will help you identify an Akan name based on the time you were born.
</p>
<ul className="tech">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div className="projImage"><img src={akan} alt=""></img></div>
</div>
</div>
)
}
export default Projects;
I have tried restarting my devtools but still no resolve.