Я пробовал кучу вещей, таких как игра с отступами и полем, я использовал таблицы и даже отображал их как встроенные и встроенные блоки, но я также пытался разделить разные части кода, надеясь, что, разделяя код, я смогу манипулировать имлучше, но без результатов.Я не могу получить свои вклады, чтобы быть рядом.Вот ссылка на код на codepen.io.Может кто-нибудь, пожалуйста, помогите мне!
/* color:#00a786 lighter green */
/* color:#005242 dark green for buttons */
/* color:003027 dark green background */
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
background-color: #fff;
}
body {
background: #ede6e6;
margin:0 auto;
font-family: arial, helvetica, sans-serif ;
}
a {
text-decoration: none;
color:#fff;
}
li {
display: inline;
padding: 10px;
font-size: 16px;
color:#fff;
}
/* --------------------------------HEADER------------------------------------- */
header{
background-image:linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(../img/heder_photo_2.jpg);
background-size: cover;
background-position: center;
right:-20px;
left: -20px;
min-height: 100vh;
margin-bottom: 300px;
overflow-x: hidden;
background-attachment: fixed;
position: absolute;
z-index: 80;
}
.row{
padding-top: 40px;
border-bottom: 2px solid white;
}
}
/* --------------------------------TOP-LEFT------------------------------------- */
.top-left{
float:left;
}
.top-left ul {
font-size: 16px;
padding-left: 150px;
padding-top: -80px;
padding-bottom: 30px
}
/* -------------------------------SOCIAL-LINKS------------------------------------- */
.social-links ul {
display:inline;
padding-left: 150px;
}
.social-links li{
font-size: 100%;
}
.social-links li:hover,
.social-links li:active{
border-bottom: 2px solid #00a786;
transition: border-bottom 0.2s;
}
/* -------------------------------TOP-RIGHT------------------------------------- */
.top-right{
float:right;
}
.top-right {
float: right;
padding-bottom: 30px;
}
.top-right li {
font-size: 100%;
font-weight: 200;
}
.top-right li:hover,
.top-right li:active{
color:#005242;
transition: color 0.2s;
}
.top-right li:first-child{
border-left: 2px solid #fff;
border-width: thin;
}
.top-right li:last-child{
border-left: 2px solid #fff;
border-width: thin;
}
/* -------------------------------H1------------------------------------- */
.main-header{
padding-top: 30px;
padding-left: 130px;
float:left;
}
.header-text{
display: inline-block;
}
h1{
font-size: 90%;
color:#fff;
font-family: sans-serif;
}
span{
color:#00a786
}
/* -------------------------------MAIN-NAV------------------------------------ */
.main-nav{
float: right;
padding-right: 30px;
padding-top: 40px;
}
.main-nav-links{
display: inline-block;
}
.main-nav-links li:hover,
.main-nav-links li:active{
border-bottom: 2px solid #00a786;
transition: border-bottom 0.2s;
}
/* -------------------------------MAIN-SECTION------------------------------------ */
.main-section{
}
.main-content{
text-align: center;
}
.content{
padding-top: 50px;
color: #fff;
display:inline-block;
}
.content h2{
font-size: 100%;
}
.content p{
font-size: 60%
}
/* -------------------------------BUTTONS------------------------------------ */
.btn:link,
.btn:visited
input[type=submit]{
display: inline-block;
padding :10px 30px;
margin-top: 60px;
font-size: 60%;
font-weight: 300;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.2s,border 0.2s,color 0.2s;
msargin-right: 15px;
}
.btn-full:link,
.btn-full:visited,
input[type=submit]{
background-color: #00a786;
border: 1px solid #005242;
color: #fff;
}
.btn-full:hover,
.btn-full:active,
input[type=submit]{
background-color: #005242;
border: 1px solid #005242;
color: #fff;
}
.search-btn:link,
.search-btn:visited
input[type=submit]{
display: inline-block;
padding :10px 30px;
margin-top: 60px;
font-size: 60%;
font-weight: 300;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.2s,border 0.2s,color 0.2s;
}
.search-btn:hover,
.search-btn:active,
input[type=submit]{
background-color: #005242;
border: 1px solid #005242;
color: #fff;
}
/* -------------------------------Section-Search------------------------------------ */
.section-Search{
background-color: #003027;
border: 2px solid #003027;
border-radius: 3px;
position:relative;
left:200px;
right:20px;
top: 500px;
height: 30vh;
width: 600px;
z-index: 99;
}
.main-Search{
padding:30px 10px;
display: inline;
}
.col1{
}
.col3{
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styling.css">
<link rel="stylesheet" type="text/css" href="vendors/fonts/Aileron/">
<title>Williams Rental Propertie's</title>
</head>
<body>
<header>
<!--- TOP LEFT-------->
<div class="row">
<div class="top-left">
<ul>
<li><i class="fas fa-phone-volume icon-contact ">(312)343-8748</i></li>
<li><i class="far fa-envelope icon-contact">WilliamsRentalProperties</i></li>
</ul>
</div>
<!--- SOCIAL LINKS-------->
<div class="social-links">
<ul>
<li><a href="#"><i class="fab fa-facebook-f"> </a></i></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-pinterest-square"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<!--- TOP RIGHT-------->
<div class="top-right">
<ul>
<li><i class="fas fa-user "> <a href="#"> Register</i></a></li>
<li><i class="fas fa-sign-in-alt"><a href="#">Login</i></a></li>
</ul>
</div>
</div>
<!--- main Header-------->
<div class="main-header">
<div class="header-text">
<h1>Williams <span> Rental</span> Properties</h1>
</div>
</div>
<nav class="main-nav">
<div class="main-nav-links">
<ul>
<li> <a href="#"> Home</a></li>
<li> <a href="#"> Featured List</a></li>
<li> <a href="#"> About Us</a></li>
<li> <a href="#"> Pages</a></li>
<li> <a href="#"> Blog</a></li>
<li> <a href="#"> contact</a></li>
</ul>
</div>
</nav>
<section class="main-section">
<div class="main-content">
<div class="content">
<h2>Let Us Find You Your Dream Home!</h2>
<p>Search real estate property records, houses, condos, land and more .
Find property info from the most comprehensive source data.</p>
<a class="btn btn-full" href="#">View Details</a>
</div>
</div>
</section>
</header>
<section class ="section-Search">
<div class="main-Search">
<form class="Search" action="index.html" method="post">
<label for="address"></label>
<!--- city-------->
<div class="col1">
<input type="text" name="Search" placeholder="keyword,zipcode">
</div>
<!--- city-------->
<div class="col2">
<label for="city"></label>
<select class="city" name="city">
<option value="city">city</option>
</select>
</div>
<!--- state------->
<div class="col3">
<label for="state"></label>
<select class="state" name="state-form">
<option value="state">state</option>
</div>
<!--- search button------->
<a class="search-btn" href="#">Search</a>
</select>
</form>
</section>
</body>
</html>