wrapping div buttons

by Jordan Dayton

HTML

<div id="wrapper">

  <div class="course-container">
    <a href="https://community.canvaslms.com/community/internal/support/archive/content?filterID=contentstatus%5Bpublished%5D~category%5Bguides%5D" target="_blank">
      <div class="course-button">
        <p>GUIDES</p>
      </div>
    </a>
  </div>

  <div class="course-container">
    <a href="https://community.canvaslms.com/community/internal/support/archive/content?filterID=contentstatus%5Bpublished%5D~category%5Btips-and-tricks%5D" target="_blank">
      <div class="course-button">
        <p>TIPS & TRICKS</p>
      </div>
    </a>
  </div>

  <div class="course-container">
    <a href="https://community.canvaslms.com/community/internal/support/archive/content?filterID=contentstatus%5Bpublished%5D~category%5Bl2-guidesworkshops%5D" target="_blank">
      <div class="course-button">
        <p>L2 GUIDES & WORKSHOPS</p>
      </div>
    </a>
  </div>

  <div class="course-container">
    <a href="https://community.canvaslms.com/community/internal/support/archive/content?filterID=contentstatus%5Bpublished%5D~category%5Blti%5D" target="_blank">
      <div class="course-button">
        <p>LTI</p>
      </div>
    </a>
  </div>

</div>

CSS

body {
	  color: #5e5e5e;
	  font: 13px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	}
	
	#wrapper {
	  text-align: center;
	  margin-top: -16px;
	}
	
	.course-container {
	  display: inline-block;
	  width: 210px;
	  height: 50px;
	  padding: 5px;
	  vertical-align: top;
	  font-size: 14px;
	}
	
	.course-button {
	  width: 200px;
	  height: 40px;
	  background: #A7A9AB;
	  border-radius: 5px;
	  position: relative;
	}
	
	#button:hover {
	  opacity: 0.7;
	}
	
	p {
	  color: #fff;
	  text-align: center;
	  font-weight: normal;
	  line-height: 40px;
	}
	
	a:link {
	  color: #0080CC;
	  text-decoration: none;
	}
	
	a:hover {
	  color: #58585B;
	  text-decoration: none;
	}
	
	a:visited {
	  color: #0080CC;
	}