My columns won’t line up not sure what I’m doing wrong. Not sure if by adding an image to the first causes my second column to line up way down and not next to it. Any help would be appreciated.
`My HTML:`
<div>
<body class = "bgcolor">
<div class = "header">
<h1>Sathish's Portfolio</h1>
<div>
<button type = "button" class = " buttons buttonshov">Projects</button>
<button type = "button" class = "buttons buttonshov">About Me</button>
<button type = "button" class = "buttons buttonshov">Contact</button>
</div>
</div>
<h2 class = "center">Projects</h2>
<h3 class = "center">----------$----------</h3>
<div class = "container">
<div class = "row">
<div class = "col-md-4">
<h4 class = "projectone">Project 1 </h4>
<div class = "projpic">
<img class = "center" src = "https://pbs.twimg.com/profile_images/638786550206230529/fwnBbDZF.png" alt = "google logo">
</div>
</div>
<div class = "col-md-4 center">
<h4 class = "projecttwo">Project 2</h4>
<div>
<img src = "https://pbs.twimg.com/profile_images/638786550206230529/fwnBbDZF.png" alt = "google logo">
</div>
</div>
</div>
</div>
</body>
</div>
My CSS:
.bgcolor{
background-color:lightslategray;
font-family:courier;
color:white;
}
.header{
background-color: royalblue;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
.buttons{
text-align:center;
padding: 10px 24px;
border-radius:8px;
background-color:white;
color:black;
}
.buttonshov:hover{
background-color:navy;
color:white;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.projectone{
color:white;
padding-left:150px;
}
.projecttwo{
color:white;
}
.projpic{
padding-left:75px;
width: 250px;
height:200px;
}
.center{
text-align:center;
color:white;
}