I'm in the process of creating a practice website to improve my HTML and CSS skills, but I'm having trouble centering a specific div. I've attempted to use margin: 0 auto, but it doesn't seem to affect the positioning of the div at all. Below is the code snippet with the "work-sample" div that I'm trying to center:
HTML:
<div id="work-div">
<div class="title black" id="work-title">My Work</div>
<div class=""clear></div>
<div id="work-sample-div">
<div class="work-sample">
<a href="https://www.google.com/" class="work-title">Google.com</a>
<div class="clear"></div>
<a href="https://www.google.com/"> <img src="images/googlethumbnail.jpg"></img> </a>
<p>Duis id pellentesque sapien. Praesent egestas ut eros eget convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam sit amet lacinia dui.</p>
</div>
</div>
</div>
CSS:
.black{
color:black;
}
body {
padding:0;
margin:0;
width:100%;
font-family: Century Gothic, sans-serif;
}
.clear{
clear:both;
}
.top-margin {
margin-top:50px;
}
.title {
font-size:4em;
text-align:center;
}
#work-title {
padding-top:20px;
}
.work-sample {
font-size:.8em;
border: solid 1px black;
width:40%;
padding: 20px;
margin: 20px;
border-radius:20px;
float:left;
min-width:400px;
}
.work-sample img {
float:left;
margin-top:10px;
width:40%;
border:1px black solid;
}
.work-sample p{
overflow:hidden;
padding-left:5px;
}
.work-sample a {
color:black;
text-decoration:none;
}
.work-title {
font-size:3em;
}
#work-div {
height:100vh;
}
You can also view a CodePen example of the current setup by following this link: http://codepen.io/anon/pen/bVROOK