对于
*{
margin: 0;
padding: 0;
}
.navBar{
display: flex;
background-color: blueviolet;
}
.leftNav{
display: flex;
width: 70%;
background-color: yellow;
}
.leftNav img{
height: 30px;
width: 30px;
border-color: white;
border-width: 2px;
border-radius: 50%;
padding: 5px;
}
.leftNav li{
list-style: none;
padding: 10px;
}
.leftNav li a{
text-decoration: none;
}
.rightNav{
display: flex;
align-items:center;
justify-content: right;
text-align: right;
width: 30%;
}<!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">
<link rel="stylesheet" href="css/style.css">
<title>iEducate, The world of education is here</title>
</head>
<body>
<nav class="navBar">
<div class="leftNav">
<img src="IMG/img.jpg" alt="Logo">
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</div>
<div class="rightNav">
<input type="text" name="search" id="search">
<button class="btn btn-sm">Search</button>
</div>
</nav>
</body>
</html>我是HTML和CSS的新手。我正在创建一个导航栏，我已经将导航栏的宽度设置为100%，其中有两个div部分左导航和右导航，宽度分别为导航栏的70%和30%。我想把右边导航的项目放在右边，但它出现在左边。将项目向右对齐并没有任何影响。
亲爱的朋友们，我已经在这封邮件中添加了屏幕截图的图片以及html和css文件链接。任何人如果知道我做错了什么，请在这里帮我。我将非常感谢你。
谢谢，Jitendra
您给justify-content的值不对，给justify-content: right;的值在rightNav类中不正确。
只需更改该属性：创建justify-content: flex-end;以及它完成的
该属性的正确值为：
flex-start：默认值。项目位于容器的开头flex-end:项目位于容器末尾center:项目位于容器中心space-between:项目之间将有空间space-around:项目之前、之间和之后都有空间space-evenly:项目周围将有相等的空间initial:将此属性设置为其默认值。阅读首字母inherit:从其父元素继承此属性。
这是学习它的绝佳环节。。。https://css-tricks.com/almanac/properties/j/justify-content/
您也可以检查MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
.rightNav{
display: flex;
align-items:center;
justify-content: flex-end;
width: 30%;
}rightNav类，只需将justify-content属性的值更改为flex-end即可。
* {
margin: 0;
padding: 0;
}
.navBar {
display: flex;
background-color: blueviolet;
}
.leftNav {
display: flex;
width: 70%;
background-color: yellow;
}
.leftNav img {
height: 30px;
width: 30px;
border-color: white;
border-width: 2px;
border-radius: 50%;
padding: 5px;
}
.leftNav li {
list-style: none;
padding: 10px;
}
.leftNav li a {
text-decoration: none;
}
.rightNav {
display: flex;
align-items: center;
justify-content: flex-end;
text-align: right;
width: 30%;
}<!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">
<link rel="stylesheet" href="css/style.css">
<title>iEducate, The world of education is here</title>
</head>
<body>
<nav class="navBar">
<div class="leftNav">
<img src="IMG/img.jpg" alt="Logo">
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</div>
<div class="rightNav">
<input type="text" name="search" id="search">
<button class="btn btn-sm">Search</button>
</div>
</nav>
</body>
</html>您想从右侧导航中删除display:flex，我认为它对您有效。