align item in html not woring

Question

*{
    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>

I am new to HTML and CSS. I am creating a navigation bar where I have taken width of navigation bar to 100% and there are two div section left nav and right nav in it with width 70% and 30% of navigation bar respectively. I want to put the items of right nav to right side but it is appearing at left. align item to right did not have any impact.

Dear friends, I have added image of screen shot and html and css file links with this mail. Anyone having idea, what I am doing wrong, then please help me here. I will be highly grateful to you.

Thanks, Jitendra

`justify-content: flex-end;` instead of `justify-content: right;` — DecPK, Jun 02 '21 at 06:40
Dear Friends, I am highly grateful that you all addressed this issue immediately. flex-end property worked like charm. Thank you all again. — Jitendra Yadav, Jun 03 '21 at 05:21

Atul Rajput · Answer 1 · 2021-06-02T07:02:49.890

You have given the wrong value to justify-content, you have given justify-content: right; which is not right in rightNav class.

just change that property only: Make it justify-content: flex-end; and its done

the right values for this property are:

flex-start : Default value. Items are positioned at the beginning of the container
flex-end : Items are positioned at the end of the container
center : Items are positioned in the center of the container space-between : Items will have space between them
space-around : Items will have space before, between, and after them
space-evenly : Items will have equal space around them initial : Sets this property to its default value. Read about initial inherit : Inherits this property from its parent element.

This one is the great link to learn it... https://css-tricks.com/almanac/properties/j/justify-content/

you can check MDN as well: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

score 0 · Answer 2 · answered Jun 02 '21 at 06:47

0

.rightNav{
  display: flex;
  align-items:center;
  justify-content: flex-end;
  width: 30%;
}

answered Jun 02 '21 at 06:47

Phymo

142
1
7

score 0 · Answer 3 · answered Jun 02 '21 at 06:57

Just change value of justify-content property to flex-end, for the rightNav class.

* {
  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>

score 0 · Answer 4 · answered Jun 02 '21 at 07:25

0

You want to remove display: flex from your right nav I think it work for you.

answered Jun 02 '21 at 07:25

VIVEK BHARDWAJ

1
1

align item in html not woring

4 Answers4