title: how can I style a specific ul without effecting other lists on webpage
body: <p>I have various ul on my web page but since adding the latest one its styling is effecting the other lists on the page. How can i make sure the styling for this ul only effects this one. I have tried and tried but can not get it to work.</p>
  
  <p>HTML CODE   </p>
  
  <p>
      <li>
          
          
      </li>
      </p>
  
  <p>CSS</p>
  
  <pre><code>.image{
  height: 252px;
  width: 252px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  margin-bottom: 40px;
  background-image: url(../images/danmorris_profile.png);
  }
  .overlay{
  width:252px;
  height:252px;
  display:none;
  position:absolute;
  top:40px;
  left:0px;
  }
  .overlay div {
  position:relative;
  display:inline-block;
  top:40px;
  margin: 40px 5px 0 0;
  }
  
  ul { list-style: none; width: 252px; 
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 60px;
  
  }
  
  ul li {
  position: relative;
  display: inline-block;
  width: 252px;
  height: 252px;
  }
  
  li:hover .overlay {
  display:block;
  background-color:black;
  opacity:0.75;
  }
  .bt1 {
  background-color:orange;
  width:50px;
  height:50px;
  }
  .bt2 {
  background-color:green;
  width:50px;
  height:50px;
  }
  </code></pre>
  
  <p>Thanks in advance</p>