leaflet js map not showing fully on page load

on loading a page load my leaflet map is unable to load fully and instead it shows a small section of the map.but when I try to resize the screen the map fully shows as a whole.i don't understand why yet i have initialized the map correctly in the script.this is my codebase where might be doing it wrong.i have added the necessary leaflet js and CSS cdn links this is my HTML

<div class="row" style="margin: 40px 5px;">
    <div class="col-lg-12">
        <div class="ms_heading">
            <h3 class="text-white p-2">properties Locations</h3>
        </div>
        <div id="map"
            style="height: 400px; margin-top:5px;">
        </div>
    </div>
    

this is my script

$(document).ready(function () {

        //1. initialize leaflet map
        var center = [-0.421498116026705, 36.950147769312004];
        var propertiesmap = L.map('map').setView(center, 10);

        propertiesmap.invalidateSize();

        var googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
            maxZoom: 10,
            subdomains:['mt0','mt1','mt2','mt3']
        });

        googleStreets.addTo(propertiesmap)

        var marker = L.marker([-0.421498116026705, 36.950147769312004]).addTo(propertiesmap);
                
    });