Currently, I have a bar with buttons that I refer to as the control bar. My intention is for it to be fixed at the bottom of the screen and span the entire width. However, there seems to be some unwanted white space on the bottom and right edges of the bar as shown in the image. I'm puzzled by this behavior even after trying to isolate the issue by simplifying the content of the control bar. Perhaps there's an unnoticed flaw in the CSS causing this?
Below is the snippet of HTML code:
<div id="controlBar">
<button id="communityList" class="sideMenuButton hvr-grow" title="Community List"><i class="fas fa-th-list"></i></button>
<button id="joinCommunity" class="sideMenuButton hvr-grow" title="Join Community"><i class="fas fa-key"></i></button>
<button id="createCommunity" class="sideMenuButton hvr-grow" title="Create a Community"><i class="fas fa-plus"></i></button>
<button id="userProfile" class="sideMenuButton hvr-grow" title="Profile"><i class="fas fa-user-cog"></i></button>
<button class="sideMenuButton hvr-grow" onclick="event.preventDefault(); document.getElementById('frm-logout').submit();"><i class="fas fa-sign-out-alt"></i></button>
<form id="frm-logout" action="{{ route('logout') }}" method="POST" style="display: none;">@CSRF</form>
</div>
CSS styles being applied:
#controlBar {
position: fixed;
background-color: #282929;
left: 0px;
bottom: 0px;
right: 0px;
white-space: nowrap;
overflow: scroll;
width: 100%;
text-align: center;
clear: both;
margin: 0px;
}
.sideMenuButton {
background-color: #221;
color: white;
border-radius: 50px;
border: none;
margin: 0.8rem;
width: 3rem;
height: 3rem;
}
Image reference of the issue:
https://i.sstatic.net/RLyOT.png
- Although it might not be perceived as an actual border, it serves as a visual representation of the problem.