The first sections or some of the fullwidth modules or main content area have top padding if you are using custom settings for navigation. This padding gets calculated dynamically via jQuery and depends on height of the navigation which can be different if you are using custom font size, custom height of the logo, or other custom values in menu settings.
The issue is related to the way jQuery behaves by design as jQuery scripts run only after the entire page is loaded, including images and videos.
At the end of the loading process jQuery calculates the height of the elements and converts it into a padding value and adds it to the first section, to first fullwidth module or to the main content area.
To fix the issue you can use preloader plugin or set custom padding manually using CSS code.
Preloader plugin will hide content of the page with animated loading icon until all content is fully loaded including dynamically calculated values.
If you would like to use CSS code you will first need to find correct value that was calculated. To do this you can use inspector in browser, here is the tutorial for Chrome.
You will need to find the HTML element that has the dynamic value added. The dynamic value is added to the "element style" section which doesn't have any stylesheet for reference, usually it's located at the very top of the Styles tab. Here is an example
The "page-container" is the main content area. If you do not see the the dynamic value you can continue to search for the next element which is first section or first module inside the section, here is an example of where you can find first section and first module:
Once you have found the dynamic value you can place the CSS code to the Divi > Theme Options > Custom CSS box.
For main content area:
#page-container {
padding-top:109px;
}For the first section:
.et_pb_section:first-child {
padding-top:109px;
}For the first module in the first section:
.et_pb_section:first-child .et_pb_module:first-child {
padding-top:109px;
}The top padding is not the only value that calculated dynamically. Position of the primary navigation is also calculated via jQuery. You can find it in the same way:
In this case you will need to use another CSS selector and another CSS property:
#main-header {
top:43px;
}