My div with the class .list-holder in the header is not adjusting its size based on the content within the div. When I increase the padding of the list items, the content overflows outside the div. I have included the Bootstrap CDN.
.list-holder {
background-color: rgba(0,0,0,0.8);
margin: 0px 40px;
margin-top: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.list-holder > ul > li{
display: inline;
padding: 10px;
border: solid 1px;
}
.list-holder > ul > li > a{
display: inline;
color: white;
text-decoration: none;
}
.list-holder > ul{
margin: 0px;
padding: 0px;
}<body>
<div class="branding">
<h1>Blogging</h1>
<div class="search-btn">
<button >Get started</button>
<div class="search">
<input type="search" placeholder="Google Search ">
<i class="fas fa-search"></i>
</div>
</div>
</div>
<div class="view-users">
<div style="display: flex">
<div class="views">Total Views: 0</div>
<div class="users">Total Users: 0</div>
</div>
</div>
<header>
<div class="list-holder">
<ul>
<li> <a href="#">Home</a> </li>
<li> <a href="#">Nation</a> </li>
<li> <a href="#">Sports</a> </li>
<li> <a href="#">Politics</a> </li>
<li> <a href="#">Entertainment</a> </li>
<li> <a href="#">Search</a> </li>
<li> <a href="#">Contact Us</a> </li>
</ul>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f1819e81819483df9b82b1c0dfc0c7dfc0">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>also :
Please let me know what mistake I am making...!