On my webpage, I have defined the header and leftpane as div. The specified height of header is 116px, and the width of leftpane is 181px. However, upon inspecting the page using chrome-developer-tool, the displayed height and width are 98.36px and 165.41px respectively instead of the original values set in the CSS.
The issue with the height is illustrated in the following image: https://i.sstatic.net/gGgqX.png
The problem with the width can be seen in this image: https://i.sstatic.net/BdZ4u.png
Here is the relevant CSS code:
.dashboard-header {
background: #000000;
height: 116px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.dashboard-leftpane {
width: 181px;
background: #000000;
height: 100%;
}
Corresponding HTML code:
<div class="input-search">
<img class="imgage-search" src="search.svg" alt="Grace Logo">
<input type="text" name="" value="" placeholder="" style="border:none; background: #FAFAFA; flex-grow: 2;">
<img class="imgage-search" src="filter.svg" alt="">
</div>
<div class="profile-menu">
<span class="profile-menu-name">USER</span>
<img src="arrow_drop_down.svg" alt="">
</div>
<div class="dashboard-leftpane">
<div class="giraffe-list">
<div class="giraffe-list-item">
<span class="giraffe-item-name">ITEM1</span>
</div>
<div class="giraffe-list-item">
<span class="giraffe-item-name">ITEM2</span>
</div>
<div class="giraffe-list-item">
<span class="giraffe-item-name">ITEM3</span>
</div>
<div class="giraffe-list-item">
<span class="giraffe-item-name">ITEM4</span>
</div>
<div class="giraffe-list-item">
<span class="giraffe-item-name">ITEM5</span>
</div>
</div>
</div>