Stuck on an html/css issue

The issue I have is that the background for .para is not showing. Its supposed to show in front of tile2 background image but it is not. I am new to html and css but I learn fast. If anyone can pitch in and show me how to fix this and what I'm doing wrong it would be much appreciated. :)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding-top: 550px;
}
header {
  height: 605px;
  padding-top: 50px;

}
.main-nav,
.main {
  position: relative; 
}
.main-nav {
  background: #fff;
  height: 70px;
  z-index: 150;
  margin-bottom: -60px;
  box-shadow: 0 4px 6px rgba(0,0,0,.4);
  overflow: hidden;
  width:100%;
  padding-top:0px;
}
header,
.main-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
  list-style-type: none;
    margin-top: 0px;
    margin: 15;
    padding: 0;
    overflow: hidden;
}
.main-nav-scrolled {
    list-style-type: none;
    margin-top: 0px;
    margin: 15;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
.main {
  background-image: url("img/tiles2.png");
  background-attachment:fixed;
  padding: 120px 50px 50px;
  column-count: 2;
  column-gap: 40px;
}

/* ------------------------------------*/
.main-nav ul {
    width: 100%;
    list-style-type: none;
    margin-top: 0px;
    margin: 15;
    padding: 0;
    overflow: hidden;
    background-color: #333;


    }

.main-nav li {
    float: left;
}

.main-nav li:last-child {
    border-right: none;
}

.main-nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 26px 29px;
    text-decoration: none;
}

.main-nav li a:hover:not(.active2) {
    background-color: #111;
}

.main-nav .active2 {
    background-color: #4CAF50;
}


<!----------------------------------------------------------->

.para{
    position: relative;
    height:800px;
    display: inline-block;
    margin-left: 230px;
    margin-right: 50px;
    margin-top:30px;
    background-color: #FFFFFF;
    padding: 50px;
    font-size:200;
    font-family:verdana;
    line-height:2;
    overflow:auto;
}
</style>
</head>

<body>

<ul>
  <li><a class="active2" href="Index.html">Home</a></li>
  <li style="float:right"><a href="Competitions.html">Competitions</a></li>
  <li style="float:right"><a href="About.html">About</a></li>
</ul>

<header>
  <img src="img/aboutHeader2.png" alt="header" style="width:100%;">
</header>

<div class="main-nav">
  <ul>
  <li><a class="active2" href="Index.html">Home</a></li>
  <li style="float:right"><a href="Competitions.html">Competitions</a></li>
  <li style="float:right"><a href="About.html">About</a></li>
</ul>
</div>

<div class="main">
  <div class="background">

  </div>

  <div class="para">
     <p>Central Pennsylvania Music Teachers Association is an affiliate of the Pennsylvania Music Teachers Association and the Music Teachers National Association. Founded in 1846 by Theodore Presser in Delaware, Ohio, MTNA serves 25,000 independent music teachers committed to the pursuit of excellence in music teaching.

MTNA and its affiliates seek to promote the professional growth and development of its members and to further the art of music by providing programs that encourage and support teaching, performance, composition and scholarly research.

To receive membership applications, and additional information about our organization click MTNA APPLICATION

</p>
  </div>

  <div class="circles">

  </div>
</div>

<script src="js/jquery-1.9.js"></script>

<script>
var  mn = $(".main-nav");
    mns = "main-nav-scrolled";
    hdr = $('header').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > hdr ) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});
</script>
</body>
</html>

Answers 1

Related Articles