Moving certain items to the right of navbar-CodePudding

Good day, everyone. Please I'm a newbie in CSS and HTML, and this is literally my first project.

So, I'm trying to build a navigation menu, and I'm trying to move two items("SIGN IN" and "CART") to the right, away from the other items on the navbar. But I can't seem to get them to move. navbar-right doesn't work. I've tried housing them inside a container and giving them a relative position, but then the navbar menu is not responsive when I decrease the size of the screen. Also, for some unknown reason, the glyphicon shopping cart item refuses to be displayed.

in my main.css, this is my code-

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<head>
    <title>Ecommerce</title>
    {% load static %}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6 fzT"
      crossorigin="anonymous">
    <link rel="stylesheet"
          href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" type="text/css" href="{% static 'store/styles.css' %}" />
</head>

<body>

<nav >
    <div >
        <a  href="#">Jumaz</a>
        <button  type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
        </button>
        <div  id="navbarSupportedContent">
            <ul >
                <li >
                  <a  aria-current="page" href="#"><i ></i>Home</a>
                </li>
                <div id="formAndButton">
                    <form id="search" method="get"  action="#">
                    <input id="input"  type="text" placeholder="Search products" aria-label="Search">
                    <button  type="submit">SEARCH</button>
                    </form>
                </div>

                <!--i intend moving the following items to the right and make them responsive when screen is shrunk-->

                <div  id="moveRight">
                    <ul >
                        <li >
                            <a href="#" >SIGN IN</a>
                        </li>
                        <li >
                            <!-- glyphicon shopping cart item does not load -->
                            <a href="#" ><span  aria-hidden="true"></span>CART</a>
                        </li>
                    </ul>
                </div>
            </ul>
        </div>
    </div>

</nav>

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
        crossorigin="anonymous"></script>

{% block body %}

{% endblock body %}

</body>
</html>

in my styles.css, i have -

#input{
    width: 500px;
    border: 1px solid #555;
    display: block;
    padding: 9px 4px 9px 40px;
    background: transparent url("data:image/svg xml,") no-repeat 13px center;

}


#formAndButton{
    margin-left: 100px;

}

/*i tried relative positioning of the items like this, but it isn't responsive when screen is shrunk*/

#moveRight{
    position:relative; left:200px;
}

li { margin-left: 15px }
In my styles.css, I also tried-
#moveRight{
display: flex;
justify-content: flex-end;}
and also tried,
#moveRight{
grid-column-start: 5; }

CodePudding user response：

<ul > should not be nested inside <ul >. They should be next to each other.

<div  id="navbarSupportedContent">
    <ul >
        <li >
            <a  aria-current="page" href="#"><i ></i>Home</a>
        </li>
        <div id="formAndButton">
            <form id="search" method="get"  action="#">
                <input id="input"  type="text" placeholder="Search products" aria-label="Search">
                <button  type="submit">SEARCH</button>
            </form>
        </div>
    </ul>
    <ul >
        <li >
            <a href="#" >SIGN IN</a>
        </li>
        <li >
            <!-- glyphicon shopping cart item does not load -->
            <a href="#" ><span  aria-hidden="true"></span>CART</a>
        </li>
    </ul>
</div>

CodePudding user response：

@Dimitris Maragkos helped with the aligning problem. To fix the responsive issue when the screen size is reduced, I used media query in my styles.css as shown below -

@media (max-width: 600px) {
    #input{
        width: 300px;
    }
    li {
        margin-top: 5px;
    }
}

the problem now remains getting the glyphicon shopping cart icon to be displayed on the CART button.