F0xcr4f7
F0xcr4f7

Reputation: 61

How to get sections to be 100% browser length

I created a small website using only html, css, and jquery. No bootstrap...

Issue: My images and divs are not showing 100% browser width. Ive got a white border that goes all the way around my site. Every div has an image as a background. Ive tried telling it to go 100% in the css but I just get the finger.

OZONE DIV:

<!-- OZONE SECTION
    =============================================== -->
    <section id="ozone">
        <div class="ozone_module">
            <h2>The link between Ozone depletion and Climate Change</h2>
            <p>Atmospheric ozone has two effects on the temperature balance of the Earth. It absorbs solar ultraviolet radiation, which heats the stratosphere. It also absorbs infrared radiation emitted by the Earth's surface, effectively trapping heat in the troposphere. Therefore, the climate impact of changes in ozone concentrations varies with the altitude at which these ozone changes occur. The major ozone losses that have been observed in the lower stratosphere due to the human-produced chlorine- and bromine-containing gases have a cooling effect on the Earth's surface. On the other hand, the ozone increases that are estimated to have occurred in the troposphere because of surface-pollution gases have a warming effect on the Earth's surface, thereby contributing to the "greenhouse" effect.</p>

            <p> the increase in carbon dioxide is the major contributor to climate change. Carbon dioxide concentrations are increasing in the atmosphere primarily as the result of the burning of coal, oil, and natural gas for energy and transportation. The atmospheric abundance of carbon dioxide is currently about 30% above what it was 150 years ago.</p>

            <p>There is an additional factor that indirectly links ozone depletion to climate change; namely, many of the same gases that are causing ozone depletion are also contributing to climate change. These gases, such as the chlorofluorocarbons (CFCs), are greenhouse gases, absorbing some of the infrared radiation emitted by the Earth's surface, thereby effectively heating the Earth's surface.</p>

            <p>Conversely, changes in the climate of the Earth could affect the behavior of the ozone layer, because ozone is influenced by changes in the meteorological conditions and by changes in the atmospheric composition that could result from climate change. The major issue is that the stratosphere will most probably cool in response to climate change, therefore preserving over a longer time period the conditions that promote chlorine-caused ozone depletion in the lower stratosphere, particularly in polar regions.</p>

            <a class="source" href="http://www.esrl.noaa.gov/csd/assessments/ozone/1998/faq9.html" target="_blank"><h4>National Oceanic and Atmospheric Administration </h4></a>

        </div>
    </section><!-- ozone -->

OZONE CSS:

    /* OZONE */
#ozone {
    background: url('../img/NASA_ozone.jpg') 50% 0 no-repeat fixed;
    min-height: 800px;
    padding: 40px 0px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.ozone_module {
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.75);
  opacity: .9;    
  padding: 2px 8px;
  color: black;
  margin-left: 60%;
  margin-top: 50px;
  margin-right: 15px;
  font: 14px Sans-Serif;
}

Upvotes: 0

Views: 52

Answers (2)

Dre
Dre

Reputation: 2953

You probably need to remove any default padding and margins from the body:

body {
    padding: 0;
    margin: 0;
}

/* OZONE */

body {
  padding: 0;
  margin: 0;
}
#ozone {
  background: url('http://placekitten.com/g/800/600 ') 50% 0 no-repeat fixed;
  min-height: 800px;
  padding: 40px 0px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.ozone_module {
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.75);
  opacity: .9;
  padding: 2px 8px;
  color: black;
  margin-left: 60%;
  margin-top: 50px;
  margin-right: 15px;
  font: 14px Sans-Serif;
}
<section id="ozone">
  <div class="ozone_module">
    <h2>The link between Ozone depletion and Climate Change</h2>
    <p>Atmospheric ozone has two effects on the temperature balance of the Earth. It absorbs solar ultraviolet radiation, which heats the stratosphere. It also absorbs infrared radiation emitted by the Earth's surface, effectively trapping heat in the troposphere.
      Therefore, the climate impact of changes in ozone concentrations varies with the altitude at which these ozone changes occur. The major ozone losses that have been observed in the lower stratosphere due to the human-produced chlorine- and bromine-containing
      gases have a cooling effect on the Earth's surface. On the other hand, the ozone increases that are estimated to have occurred in the troposphere because of surface-pollution gases have a warming effect on the Earth's surface, thereby contributing
      to the "greenhouse" effect.</p>

    <p>the increase in carbon dioxide is the major contributor to climate change. Carbon dioxide concentrations are increasing in the atmosphere primarily as the result of the burning of coal, oil, and natural gas for energy and transportation. The atmospheric
      abundance of carbon dioxide is currently about 30% above what it was 150 years ago.</p>

    <p>There is an additional factor that indirectly links ozone depletion to climate change; namely, many of the same gases that are causing ozone depletion are also contributing to climate change. These gases, such as the chlorofluorocarbons (CFCs), are
      greenhouse gases, absorbing some of the infrared radiation emitted by the Earth's surface, thereby effectively heating the Earth's surface.</p>

    <p>Conversely, changes in the climate of the Earth could affect the behavior of the ozone layer, because ozone is influenced by changes in the meteorological conditions and by changes in the atmospheric composition that could result from climate change.
      The major issue is that the stratosphere will most probably cool in response to climate change, therefore preserving over a longer time period the conditions that promote chlorine-caused ozone depletion in the lower stratosphere, particularly in
      polar regions.</p>

    <a class="source" href="http://www.esrl.noaa.gov/csd/assessments/ozone/1998/faq9.html" target="_blank"><h4>National Oceanic and Atmospheric Administration </h4></a>

  </div>
</section>
<!-- ozone -->

Upvotes: 0

Nandan Bhat
Nandan Bhat

Reputation: 1563

In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.

Try using,

body
{
   margin:0;
}

Upvotes: 1

Related Questions