By setting the width to 40% in .contenthome2, you are limiting its width to 40% for mobile view. You can adjust this width for web view using media queries to meet your requirements. Keep in mind that using margin-left:100px and margin-right:150px may work well for web view, but it might take up more space in mobile view. Consider using percentage values for better responsiveness.
I have made some modifications to the code by setting width:100% and padding:10% 15%:
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
nav {
// CSS styles for navigation menu
}
@media (max-width: 1000px) {
// Media query styles for max-width 1000px
}
@media (max-width: 920px) {
// Media query styles for max-width 920px
}
/*index*/
.contentHome {
// CSS styles for .contentHome
}
.contentHome2 {
// CSS styles for .contentHome2 with modified width and padding
}
.paragrahHome h2 {
white-space: nowrap;
}
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Responsive Navigation Menu</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav>
<div class="logo">Nick's Reviews</div>
<input type="checkbox" id="click" />
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="../index.html">Home</a></li>
<li><a href="/mainPages/googleForm.html">Google Form</a></li>
<li><a href="/mainPages/myMovies.html">Movies</a></li>
<li><a href="/mainPages/myTvShows.html">Tv-Shows</a></li>
<li><a href="/mainPages/topMovies.html">Top Movies</a></li>
<li><a href="/mainPages/topTvShows.html">Top Tv-Shows</a></li>
</ul>
</nav>
<div class="contentHome">
<div>Welcome To Nick's Movie And Tv-Show Reviews</div>
</div>
<div class="contentHome2">
<div class="paragrahHome">
<h2>About this website:</h2>
<p>
// Text content about the website
</p>
</div>
</div>
</body>
</html>