Add padding or margin to the target div equal to the header height:
body { padding-top: 60px; /* height of fixed header */ } Problem: Grid or flex items overlap because of negative margins or absolute children. divxatope
I’ll give you a few common causes and fixes for when instead of flowing around it. 1. Absolute positioning causing overlap Problem: Text inside a positioned element overlaps another div because the div is taken out of normal flow. Add padding or margin to the target div
.clearfix::after { content: ""; display: table; clear: both; } Or for overlapping text due to floats: Absolute positioning causing overlap Problem: Text inside a
Check parent display: grid and ensure no item is set to grid-row: 1 / 1 overlapping others. 5. Generic "text covering div" due to overflow If you literally mean the div is too small and text spills out covering other elements :