css中某些元素的宽度设置问题
先生，我在设置元素的宽度时遇到了问题，如navbarr right和navbar left，我想在应用媒体查询时将navbar元素居中，并且还想更改其宽度，使其看起来很好看，但不会发生。css中某些元素的宽度设置问题,css,Css,先生，我在设置元素的宽度时遇到了问题，如navbarr right和navbar left，我想在应用媒体查询时将navbar元素居中，并且还想更改其宽度，使其看起来很好看，但不会发生。 请以初学者友好的方式告诉我哪里做错了，我必须改变哪里，改变什么，并说明原因，因为我是初学者。我不太熟悉网络，但为什么你不直接使用#navbarleft或#navbarright 我的意思是为什么你不直接用你在类名上给出的名字访问它，我希望这会有所不同，试着告诉我 my html:- ``` <!D
请以初学者友好的方式告诉我哪里做错了，我必须改变哪里，改变什么，并说明原因，因为我是初学者。我不太熟悉网络，但为什么你不直接使用#navbarleft或#navbarright 我的意思是为什么你不直接用你在类名上给出的名字访问它，我希望这会有所不同，试着告诉我
my html:-
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>i-Educate - New way to learn</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar background">
<div class="navbar-left">
<img src="logo.jpg" alt="" id="logo">
<ul class="nav-list">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="navbar-right">
<input type="text" name="search" id="search" placeholder="Search here">
<button class="btn-search">Search</button>
</div>
</nav>
<section class="container background">
<div class="para">
<h1>This is the modern way of learning</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore magni, ut optio dolorum dicta minus repudiandae fuga itaque veniam corrupti nulla, cum fugit eveniet repellendus. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit
facere, vel consequuntur deserunt iusto inventore voluptas eaque atque tempora. Corporis voluptatibus, sed aliquid iure distinctio, ipsa perferendis necessitatibus quam, vero excepturi rem ratione recusandae. Quo nemo consequatur blanditiis
neque eos commodi quam debitis doloribus nostrum, numquam suscipit ipsa vitae veritatis?</p>
<div class="buttons">
<button class="btn">Subscribe</button>
<button class="btn">Watch here</button>
</div>
</div>
<div class="img">
<img src="logo.jpg" alt="laptop">
</div>
</section>
<section class="content">
<h1 class="heading">About us</h1>
<div class="main-box">
<div class="text">
<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus dignissimos quibusdam quos laborum aliquid repellendus minima iure est temporibus voluptatibus voluptas possimus fuga vel, molestiae at hic quo necessitatibus voluptatum excepturi
animi rem doloribus omnis tempore. Optio sapiente quo, architecto dolore hic ea molestiae at adipisci consectetur libero quasi possimus? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus velit perspiciatis pariatur earum
debitis blanditiis nemo, harum repell </p>
</div>
<div class="photo">
<img src="https://source.unsplash.com/1600x900/?books , student" alt="">
</div>
</div>
<div class="middle-box">
<div class="text">
<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus dignissimos quibusdam quos laborum aliquid repellendus minima iure est temporibus voluptatibus voluptas possimus fuga vel, molestiae at hic quo necessitatibus voluptatum excepturi
animi rem doloribus omnis tempore. Optio sapiente quo, architecto dolore hic ea molestiae at adipisci consectetur libero quasi possimus? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus velit perspiciatis pariatur earum
debitis blanditiis nemo, harum repell </p>
</div>
<div class="photo">
<img src="https://source.unsplash.com/700x900/?classroom , education" alt="">
</div>
</div>
<div class="main-box">
<div class="text">
<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus dignissimos quibusdam quos laborum aliquid repellendus minima iure est temporibus voluptatibus voluptas possimus fuga vel, molestiae at hic quo necessitatibus voluptatum excepturi
animi rem doloribus omnis tempore. Optio sapiente quo, architecto dolore hic ea molestiae at adipisci consectetur libero quasi possimus? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus velit perspiciatis pariatur earum
debitis blanditiis nemo, harum repell </p>
</div>
<div class="photo">
<img src="https://source.unsplash.com/1600x900/?coding" alt="">
</div>
</div>
</section>
<section class="contact">
<h1>Contact Us</h1>
<div class="contact-box">
<input type="text" name="name" id="name" placeholder="Enter Your Name">
<input type="email" name="email" id="email" placeholder="Enter Your email">
<input type="text" name="address" id="address" placeholder="Enter Your address">
<textarea name="query" id="query" cols="30" rows="10" placeholder="Enter your query"></textarea>
<button class="contact-btn">Submit</button>
</div>
</section>
<footer class="footer">
copyright preserved
</footer>
</body>
</html>
```
my style.css(styling+mediaQuery):-
* {
margin: 0;
padding: 0;
}
#logo {
width: 50px;
height: 50px;
margin-left: 5px;
border: 2px solid black;
border-radius: 50px;
}
.navbar {
display: flex;
position: sticky;
top: 0;
}
.navbar .navbar-left {
display: flex;
/* background-color: red; */
width: 50%;
}
.navbar .navbar-left .nav-list {
display: flex;
align-items: center;
justify-content: center;
}
.nav-list li {
list-style: none;
padding: 5px 5px;
}
.nav-list li a {
text-decoration: none;
cursor: pointer;
color: white;
padding: 5px 15px;
font-size: 17px;
}
.nav-list li a:hover {
background-color: white;
color: black;
}
.background {
background: rgba(0, 0, 0, 0.1) url('../bg.jpg');
background-size: cover;
background-blend-mode: darken;
}
.navbar .navbar-right {
width: 50%;
/* display: flex; */
/* background-color: purple; */
text-align: right;
padding-top: 15px;
padding-right: 10px;
}
.navbar .navbar-right input {
width: 20%;
border: 2px solid rgb(26, 8, 26);
padding: 2px 2px;
border-radius: 5px;
}
.btn-search {
padding: 2px 2px;
border: 2px solid black;
border-radius: 5px;
cursor: pointer;
}
.container {
display: flex;
height: 700px;
/* border: 2px solid red; */
}
.container .para {
/* background-color: red; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 65%;
padding: 5px 70px;
margin-bottom: 10px;
color: white;
}
.para h1 {
font-size: 30px;
padding: 20px 0px;
}
.para p {
font-size: 18px;
margin-left: 160px;
}
.container .img {
display: flex;
/* background-color: purple; */
width: 35%;
/* justify-content: center; */
align-items: center;
}
.container .img img {
width: 150px;
height: 150px;
border: 2px solid black;
border-radius: 150px;
}
.buttons {
/* border: 2px solid green; */
width: 65%;
margin-top: 20px;
}
.buttons .btn {
padding: 5px;
font-size: 15px;
margin: 0px 3px;
border: 2px solid black;
color: white;
border-radius: 10px;
background: none;
}
.buttons .btn:hover {
background-color: white;
color: black;
}
.content {
/* border: 2px solid green; */
height: 83vh;
background-color: #f2d8b6;
}
.content .heading {
text-align: center;
font-size: 35px;
/* margin-top: 5px; */
}
.content .main-box {
border: 2px solid green;
height: 150px;
display: flex;
width: 70%;
margin: auto;
margin-top: 21px;
border-radius: 10px;
margin-bottom: 50px;
}
.content .middle-box {
border: 2px solid green;
border-radius: 10px;
height: 150px;
display: flex;
width: 70%;
margin: auto;
margin-top: 21px;
margin-bottom: 50px;
flex-direction: row-reverse;
}
.middle-box img {
padding-left: 10px;
}
.content .text {
padding: 5px 10px;
font-size: 17px;
}
.content .photo img {
width: 130px;
height: 130px;
padding-right: 20px;
padding-top: 10px;
/* border: 2px solid black; */
}
.contact {
background-color: rgb(255, 241, 241);
}
.contact h1 {
text-align: center;
padding: 5px 0px;
font-size: 35px;
}
.contact .contact-box {
display: flex;
flex-direction: column;
}
.contact .contact-box input,
textarea {
width: 50%;
margin: auto;
padding: 8px 0px;
margin-top: 5px;
margin-bottom: 5px;
border: 2px solid black;
border-radius: 8px;
font-size: 18px;
}
.contact-box .contact-btn {
width: 100px;
margin: auto;
padding: 5px;
border: 2px solid black;
border-radius: 8px;
font-size: 20px;
cursor: pointer;
}
.contact-box .contact-btn:hover {
background-color: black;
color: white;
}
.footer {
background-color: black;
height: 35px;
}
@media only screen and (max-width:1220px) {
.navbar {
border: 2px solid blue;
flex-direction: column;
height: 350px;
justify-content: center;
align-items: 'center';
width: 100%;
}
.navbar-left {
border: 2px solid red;
flex-direction: column;
margin: auto;
}
.navbar-right {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
margin: auto;
}
.navbar-right input {
width: 50%;
}
.nav-list {
flex-direction: column;
}
.container .para {
padding: 5px 0px;
}
}