.contact .container .message {
float: right;
margin-top: 30px;
min-width: 60%;
}
.message form {
display: flex;
flex-direction: column;
}
.message form input,
.message form textarea {
margin-bottom: 15px;
padding: 10px;
font-size: 15px;
resize: none;
}
.message form textarea {
min-height: 200px;
}
.message form input::placeholder,
.message form textarea::placeholder {
color: #000;
}
.message form input[type="submit"] {
max-width: 100px;
background: #2196f3;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 2px;
}<div class="contact">
<div class="container">
<div class="heading">
<h2>Contact Me</h2>
</div>
<div class="left">
<div class="detail">
<div class="icon">
<i class="fa fa-map-marker"></i>
</div>
<div class="text">
<h3>Address
<h3>
<p>xxx street<br></p>
</div>
</div>
<div class="detail">
<div class="icon">
<i class="fa fa-phone"></i>
</div>
<div class="text">
<h3>No Handphone
<h3>
<p>012345678</p>
</div>
</div>
<div class="detail">
<div class="icon">
<i class="fa fa-envelope-o"></i>
</div>
<div class="text">
<h3>Email
<h3>
<p>blabla@gmail.com</p>
</div>
</div>
</div>
<div class="message">
<form>
<h3>Message Me</h3>
<input type="text" name="" placeholder="Full Name">
<input type="email" name="" placeholder="Email">
<textarea placeholder="Your Message"></textarea>
<input type="submit" value="send">
</form>
</div>
</div>
</div>I'm a beginner using css and i am try to build mini project so this is the project, I don't know why the form I have is full width to the right, even though I'm using padding on all sides. I want to make the form display have a space on the right side. I've used padding for all sides but it still doesn't work, I don't know what to do to solve this problem. Can someone help me.