leaflet map grey screen for geoJSON Layer - leaflet

Question

Wondering if anyone can help, it's a bit of a strange one. My leaflet map works in isolation, but when added to some existing code the geoJSON (world-map.geojson) appears not to be added to a layer, I just get a grey screen with the leaflet map controls. However, when the leaflet.css is commented out you can see the geoJSON layer has been added... I get no errors and If I comment out references to other JS files it makes no difference.
As this appears to be conflict of sorts i'm not expected a hard and fast answer, but if anyone has come across this before or could suggest any pointers it would be much appreciated.
HTML
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css">
<script type="text/javascript" src="leaflet.js"></script>
<script type="text/javascript" src="world-map.geojson"></script>
<style type="text/css">
#map {
height: 600px;
width: 100%;
}
</style>
<div id="map"></div>
<script src="map.js"></script>
JS - stripped right back
var geojson,
layer,
map = L.map('map').setView([43.8476, 18.3564],3);
// style each continent
function countriesStyle(feature) {
return {
fillColor: "#FED976",
weight: 1,
opacity: 1,
color: "white",
dashArray: 1,
fillOpacity: 0.7
};
}
// add layer
geojson = L.geoJson(countries, {
style: countriesStyle,
maxZoom: 2,
minZoom: 2
}).addTo(map);
// works. countries var is in the DOM
for(var i = 0; i < countries.features.length; i++) {
console.log(countries.features[i].properties.name)
}