List Item Arrangement-Need Help

HTML-CSS
1

I am doing a university task and stuck for more than one hour on this stupid problem. Help me out to figure what is going wrong.

I am trying to make a simple layout for website. Whenever i enter layout items using <li> tag, these list items are not fitting in the sidebar section. But are going left. Below screenshot will explain my problem

1
11366×669 4.83 KB

Here is my code so far
HTML

</header>

<body>
    <div id="container">
        <div id="header">
            <div id="logo"></div>
        </div>
        <div id="menu"></div>
        <div id="content-container">
            <div id="sidebar">
                <h3>Computer Science Programs</h3>
                <ul id="sidebar-list">
                    <li>BCS</li>
                    <li>BSE</li>
                    <li>MCS</li>
                    <li>BTN</li>
                </ul>
            </div>
            <div id="content"></div>
        </div>
        <div id="footer"></div>
    </div>
</body>

CSS

        * {
            margin: 0;
            padding: 0;
        }
        #container {
            border: 1px solid black;
            padding: 5px;
        }
        #header {
            width: auto;
            background-color: burlywood;
            height: 100px;
        }
        #logo {
            width: 20%;
            height: 100px;
            background-color: coral;
        }
        #menu {
            height: 50px;
            width: auto;
            margin-top: 5px;
            background-color: cadetblue;
        }
        #content-container {
            margin-top: 5px;
        }
        #content-container::after {
            content: "";
            display: block;
            clear: both;
        }
        #sidebar {
            height: 70%;
            width: 30%;
            background-color: cornflowerblue;
            float: right;
            
        }
        #content {
            height: 70%;
            width: 69%;
            background-color: crimson;
            float: left;
        }
        #footer {
            width: 100%;
            height: 90px;
            background-color: darkmagenta;
            margin-top: 5px;
        }
2

You’ve globally disabled padding, which the list items usually use to position themselves inward. You can either add padding to your list, or set a property on #sidebar-list that will change the way it’s positioned.

#sidebar-list {
    /* outside by default */
    list-style-position: inside;
}

source

3

Thanks a lot. My problem finally solved