delete top margin from Customizr theme's web page - html

Question

I'm a WordPress newbie.
I am running my website on Customizr-Child theme (using Child Themify plugin http://wordpress.org/plugins/child-themify/).
When, I try to write html code in a webpage, there seem to be unnecessary margin at the top of the page, ex. http://www.resourcematics.com/ag-tool/
I would like to get rid of this top margin.
My Child theme Appearance > editor tab has only style.css file.
Can somebody guide me please how to resolve this issue!
Thanks in advance,
Ankit

Answer 1

First of all make sure you reset your css code by adding this in the top of it
* {
margin : 0;
padding: 0;
}
If you did that, and the margin is still there, make sure there isn't any <h1> or <h2> in the top of your code , because they have default margin that appear like it's body margin-top
If there is any try to make a class for them called for example title
then add this to your css file
.title {
margin : 0;
padding: 0;
}

Answer 2

Its actually not a margin but a border.
.tc-header {
border-bottom: 10px solid #e9eaee;
border-top: 5px solid #27cda5;
}

Answer 3

[EDIT]
So, in light of the clarification regarding the issue, here's what I found out by opening up the browser developer inspector tool. Look at the HTML which is generated in your content container:
<div class="entry-content">
<p>
<br><br><br>
<meta charset="utf-8">
<!-- P tag with line break BR tags and meta tag -->
</p>
<p>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><br>
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js"></script>
<!-- P tag with meta tag and script tag -->
</p>
<link href="https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css" rel="stylesheet">
<style>
body { margin:0; padding:0; }
.map-info { font-size: 20px; }
#map { position: relative; width: 100%; height: 500px; }
</style>
<p>
<br>
<!-- P tag with line break BR tag -->
</p>
<div>
Our GIS based agriculture water demand model is of 5 X 5 arc minutes (approximately 9 X 9 kilometres at the equator) resolution.
</div>
<p>
Following maps show <b>area irrigated by country in hectares around year 2010</b>. The map was developed based on Siebert <i>et. al.</i>, 2005 and Resourcematics’ Agriculture Water Model
</p>
</div>
What conclusions can we draw about this? Simple.
P tags: Browsers automatically add some space (margin) before and after each P tag element. Source
BR tags (inside P tags): Pretty much self-explanatory. Adds a line-break.
The Plugin that generates the map: It seems that the plugin adds all it's scripts, css and responsive meta (just like you would in the HEAD section of a html page) directly in your content container. He does so by enclosing it's content in our aforementioned P tags (it's a big guess, but plausible).
Solution(s):
If I were you, I would check first if, by accident, you added
unnecessary line breaks in the WYSIWYG editor before the main text.
I would consider maybe using and testing out other Map plugins and
see if it solves the problem.