Mapbox map inside a div not centered properly

Question

Hey I have a mapbox map(GL) inside a div. The issue i am facing is that, the map is not centered.

NOTE: My marker also has the same coordinates as the center coordinates.

But as soon as i zoom in or zoom out the entire window, or if i restore down the window , or if i do inspect screen and half the window, the map will be automatically centered

Things to note :

1. The container holding the map is set to display none on page load, and set to display "block" later.

2. I have tired doing map.resize(), and also i have tried doing a setinterval on map.resize() ,but of no success.

3. i have tried changing the css position of the map container to relative, absolute etc, but of no success.

4. if you look carefully in the first picture there is no mapbox logo writing in the bottom left hand corner. Does that mean that the screen is cut off?

5. And plus while using the mouse wheel scroll to zoom in , the zoom goes away from the center to the left side of the map :(

var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/.......',
        center: [116.0588, -33.8487],
        zoom: 9
      });

map.resize()  // have tried map.resize() after map.onload as well
      

Thank you so much for your time. Any help is appreciated.