Why my content does not go to the right side of the screen?-CodePudding

I am designing an admin dashboard. I thought of dividing the page into two parts by using the bootstrap grid system. One part (the 3/12 of the screen) includes a nav and that is OK but I want to put some content into the 9/12 of the screen and for some reason it is also appearing in the nav. I want the text "bruh" in the first picture to be in the purple place in the second picture.

the current situation how I want the things to be

This is my html code:

      <div >
        <div >
            <div>
                <div >
                    <ul >
                        <li >
                        <a  aria-current="page" href="#">Stats</a>
                        </li>
                        <li >
                        <a  href="#">Graphs</a>
                        </li>
                        <li >
                        <a  href="#">Users</a>
                        </li>
                    </ul>

                    <br>

                    <ul >
                        <li >
                        <a  aria-current="page" href="#">Reports</a>
                        </li>
                        <li >
                        <a  href="#">Revenue</a>
                        </li>
                        <li >
                        <a  href="#">Countries</a>
                        </li>
                        <li >
                            <a  href="#">Spammers</a>
                        </li>
                    </ul>
                </div>    
            </div>
            <div >
                <ul >
                    <li ><h2>Bruh</h2></li>
                </ul>
            </div>
        </div>
      </div>

and this is my css:

body{
    font-family: 'Rosario', sans-serif;
    min-height: max-content;
}

.gotodown{
    margin-top: 80px;
    margin-left: 25px;
}

.coolbox{
    padding: 0.2em;
}

.boxbox{
    padding-top: 2%;
    margin-bottom: 100px;
}

.awesome_border{
    border-style: solid;
    border-color: red;
}

I tried writing my content in the , expecting it to appear on the right side of the screen but it appeared in the nav to the left instead.

CodePudding user response：

You've got one unnecessary div and you're closing the row div too soon.

This works for me:

   <div >
        <div >
                <div >
                    <ul >
                        <li >
                        <a  aria-current="page" href="#">Stats</a>
                        </li>
                        <li >
                        <a  href="#">Graphs</a>
                        </li>
                        <li >
                        <a  href="#">Users</a>
                        </li>
                    </ul>

                    <br>

                    <ul >
                        <li >
                        <a  aria-current="page" href="#">Reports</a>
                        </li>
                        <li >
                        <a  href="#">Revenue</a>
                        </li>
                        <li >
                        <a  href="#">Countries</a>
                        </li>
                        <li >
                            <a  href="#">Spammers</a>
                        </li>
                    </ul>
                </div>    
        
            <div >
                <ul >
                    <li ><h2>Bruh</h2></li>
                </ul>
            </div>
        </div>
      </div>

Now you just need to implement some styling to get it positioned how you want.

CodePudding user response：

I don't see any specification to align text/ content to the right

try this code in your CSS for anything you want to send to the right. put it in a div <div ></div> or section whatever works for you.

margin-left: auto; 
margin-right: 0;