Why is there this huge margin in my webpage - html

Question

I just made a for and I'm trying to put 2 divs next to each other in another div but there is this huge margin that won't let it happen I'm trying to figure it out but I can't get anything to work. please help me I have been trying to figure this out for hours. https://i.stack.imgur.com/JHAT1.png
just look at the /contact page/ in the CSS section that's the only code that I'm trying to fix. its only on the bottom.
#import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
color: #ffffff;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #222;
}
nav {
display: flex;
height: 120px;
width: 100%;
background: #192841;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
color: #fff;
font-size: 30px;
font-weight: 600;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: #f2f2f2;
text-decoration: none;
font-size: 16px;
font-weight: 500;
padding: 8px 14px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: #111;
background: #fff;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked ~ .menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
background: #111;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
}
#click:checked ~ ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked ~ ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: cyan;
}
}
/* Footer */
.footer {
text-align: center;
display: inline-block;
bottom: 0;
width: 100%;
height: 50px;
padding-bottom: 1%;
}
.footer {
height: 100%;
}
/* Footer */
/*home page*/
.contentHeader {
text-align: center;
z-index: -1;
width: 100%;
padding-top: 2%;
color: #1b1b1b;
font-size: 30px;
font-weight: 400;
}
#media screen and (max-width: 768px) {
.contentHeader {
text-align: center;
z-index: -1;
width: 100%;
padding-top: 10px;
color: #1b1b1b;
padding: 2%;
padding-left: 5%;
padding-right: 5%;
}
}
.AboutOnHomepage {
padding: 5% 10%;
padding-top: 2%;
padding-bottom: 4%;
width: 100%;
text-align: justify;
align-items: center;
display: inline-block;
}
#media screen and (max-width: 768px) {
.AboutOnHomepage {
padding-top: 15%;
width: 100%;
text-align: justify;
height: 100px;
text-align: center;
}
.AboutOnHomepage p {
text-align: justify;
}
}
.AboutOnHomepage h2 {
white-space: nowrap;
}
.mainUpdate {
padding-left: 10%;
padding-right: 10%;
}
#media screen and (max-width: 768px) {
.mainUpdate {
width: 100%;
}
}
.recentUpdates {
padding-bottom: 3%;
text-align: center;
font-size: 20px;
}
#media screen and (max-width: 768px) {
.recentUpdates {
padding-top: 20%;
}
}
.up1Home {
text-align: center;
font-size: 18px;
font-weight: lighter;
}
.up2Home {
text-align: center;
padding-top: 3%;
font-size: 18px;
font-weight: lighter;
}
.up3Home {
text-align: center;
padding-top: 3%;
font-size: 18px;
font-weight: lighter;
}
.updateHome1 {
text-align: center;
width: 100%;
padding-bottom: 3%;
margin-top: 0%;
border-bottom: 1px solid white;
}
.par1 {
padding-top: 2%;
padding-left: 5%;
}
.img1 {
text-align: center;
padding-top: 2%;
width: 100px;
height: 100px;
}
#media screen and (max-width: 768px) {
.updateHome1 {
width: 100%;
margin-top: 2.5%;
margin-bottom: 20px;
}
.par1 {
margin-left: 10px;
}
.img1 {
margin-top: 12%;
margin-bottom: 10%;
width: 150px;
height: 100px;
}
}
.updateHome2 {
text-align: center;
padding-bottom: 3%;
margin-top: 0%;
border-bottom: 1px solid white;
}
.par2 {
text-align: center;
padding-top: 2%;
}
.img2 {
text-align: center;
margin-top: 2%;
width: 100px;
height: 100px;
}
#media screen and (max-width: 768px) {
.updateHome2 {
width: 100%;
margin-top: 2.5%;
margin-bottom: 20px;
}
.par2 {
margin-left: 10px;
}
.img2 {
margin-top: 12%;
margin-bottom: 10%;
width: 150px;
height: 100px;
}
}
.updateHome3 {
text-align: center;
padding-bottom: 10%;
margin-top: 0%;
}
.par3 {
padding-top: 2%;
float: left;
margin-left: 10px;
}
.img3 {
text-align: center;
margin-top: 2%;
width: 100px;
height: 100px;
}
#media screen and (max-width: 768px) {
.updateHome3 {
width: 100%;
margin-top: 2.5%;
margin-bottom: 20px;
}
.par3 {
margin-left: 10px;
}
.img3 {
margin-top: 12%;
margin-bottom: 10%;
width: 150px;
height: 100px;
}
}
/*home page*/
/*Google form*/
#media screen and (max-width: 768px) {
.content {
padding-bottom: 10%;
}
}
.googleFormHeading {
text-align: center;
z-index: -1;
width: 100%;
padding-top: 2%;
color: #1b1b1b;
font-size: 30px;
font-weight: 400;
}
#media screen and (max-width: 768px) {
.googleFormHeading {
text-align: center;
z-index: -1;
width: 100%;
padding-top: 2%;
color: #1b1b1b;
font-size: 30px;
font-weight: 400;
padding-left: 5%;
padding-right: 5%;
}
}
.bothGoogleForms {
padding-top: 3%;
display: inline-block;
text-align: center;
width: 100%;
}
.googleFormTv {
padding-left: 4%;
display: inline-block;
}
.googleFormTv iframe {
width: 700px;
height: 900px;
text-align: center;
display: inline-block;
}
.googleFormMovie {
padding-left: 3%;
display: inline-block;
margin-bottom: 10%;
}
.googleFormMovie iframe {
width: 700px;
height: 900px;
text-align: center;
display: inline-block;
}
#media screen and (max-width: 768px) {
.bothGoogleForms {
text-align: center;
width: 100%;
}
.googleFormTv {
text-align: center;
width: 90%;
padding-bottom: 11%;
border-bottom: 1px solid white;
}
.googleFormTv iframe {
width: 100%;
padding-left: 2%;
height: 976px;
}
.googleFormMovie {
text-align: center;
width: 100%;
padding-top: 11%;
margin-bottom: 15%;
}
.googleFormMovie iframe {
padding-left: 2%;
width: 90%;
height: 976px;
}
}
/*Google form*/
/*Contact Page*/
.ContactPageAll {
padding-left: 15px;
padding-right: 15px;
width: 100%;
display: inline-block;
}
.contactForm {
color: #111;
text-align: left;
width: 30%;
}
.contactForm input,
textarea,
label {
display: block;
color: #ffffff;
}
.contactForm input,
textarea,
button {
display: block;
padding: 4%;
width: 120%;
background-color: white;
color: #111;
}
.contactFormName {
padding-bottom: 2%;
font-size: 20px;
}
.socials {
width: 55%;
display: inline-block;
}
/*Contact Page*/ ;
<!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"> Reviews</div>
<input type="checkbox" id="click" />
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li>Home</li>
<li>Google Form</li>
<li>Movies</li>
<li>Tv-Shows</li>
<li>Top Movies</li>
<li>Top Tv-Shows</li>
<li><a class="active" href="contact.html">Contact</a></li>
</ul>
</nav>
<div class="ContactPageAll">
<div class="socials">fklghliabgljglabg</div>
<div class="contactForm">
<form action="https://formsubmit.co/myemail#aol.com" method="POST">
<label class="contactFormName" for="name">Name:</label>
<input
type="text"
name="name"
required
placeholder="Enter Your Name"
/>
<label class="contactFormEmail" for="Email">Email:</label>
<input
type="email"
name="email"
required
placeholder="Email Address"
/>
<label
class="contactForMessage"
for="message"
placeholder="Write Your Message here"
>What Do You Want to Say:</label
>
<textarea
name="message"
id="message"
placeholder="Write Your mEssage here"
cols="30"
rows="10"
></textarea>
<input
type="hidden"
name="_subject"
value="New submission From My website"
/>
<input
type="hidden"
name="_next"
value="https://sunnymoon25.github.io/mainPages/thanks.html"
/>
<input type="hidden" name="_captcha" value="false" />
<button type="submit">Send</button>
</form>
</div>
</div>
</body>
</html>
just look at the /contact page/ section that's the only code that I'm trying to fix

Answer 1

This is not margin this actual width as you have given
If you want to side by side div so you need to add below html and CSS so you get as you want output.
<div class="ContactPageAll">
<div class="socials">fklghliabgljglabg</div>
<div class="contactForm">
<form action="https://formsubmit.co/myemail#aol.com" method="POST">
<label class="contactFormName" for="name">Name:</label>
<input type="text" name="name" required="" placeholder="Enter Your Name">
<label class="contactFormEmail" for="Email">Email:</label>
<input type="email" name="email" required="" placeholder="Email Address">
<label class="contactForMessage" for="message" placeholder="Write Your Message here">What Do You Want to Say:</label>
<textarea name="message" id="message" placeholder="Write Your mEssage here" cols="30" rows="10"></textarea>
<input type="hidden" name="_subject" value="New submission From My website">
<input type="hidden" name="_next" value="https://sunnymoon25.github.io/mainPages/thanks.html">
<input type="hidden" name="_captcha" value="false">
<button type="submit">Send</button>
</form>
</div>
</div>
and put css below like
.ContactPageAll {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.socials {
width: 50%;
}
.contactForm {
width: 50%;
}
.contactForm input, textarea, button {
display: block;
padding: 2%;
width: 100%;
background-color: white;
color: #111;
}
here I have taken 50:50 width, you can take any width and update it as you want