Hello! I am trying to learn some html and css and I have been following a tutorial. For some reason, I can’t get all of my 4 boxes to lign up horizontally and I have checked my code. Here are my html and css codes. Appreciate your assistance.
html code:
Pianocourse101 <div class="logo">
<a href="index.html">Pianocourse101</a>
</div>
<li><a href="http://localhost/pianocourse101/register.php">Register</li></a>
<li><a href="http://localhost/pianocourse101/login.php">Login</li></a>
<li><a href="">About Me</li></a>
<li><a href="">Contact Us</li></a>
Download Section: Primer Level
Access full contents for just $50! Study at your own pace, whenever you want, whereever you want!
<div class="service1">
<h1>Download Section: Level 1</h1>
<a href=""><img class="image" src="images/bass.jpg"></a>
<p>Access full contents for just <strong>$100!</strong> Study at your own pace, whenever you want, whereever you want!</p>
</div>
<div class="service1">
<h1>Download Section: Level 2</h1>
<a href=""><img class="image" src="images/bass.jpg"></a>
<p>Access full contents for just <strong>$150!</strong> Study at your own pace, whenever you want, whereever you want!</p>
<div class="service1">
<h1>Download Section: Level 3</h1>
<a href=""><img class="image" src="images/bass.jpg"></a>
<p>Access full contents for just <strong>200!</strong> Study at your own pace, whenever you want, whereever you want!</p>
css code;
body {
margin: 0;
padding: 0;
font-family: ‘Arial’, ‘serif’;
}
.nav {
background-color: #ffffff;
color: #000000;
list-style: none;
text-align: right;
padding: 20px 0 0 0;
}
.nav > li {
display: inline-block;
padding-right: 50px;
font-size: 12px;
}
.nav > li > a {
text-decoration: none;
color: #000000;
}
.nav > li > a:hover {
color: #c1c1c1;
}
.logo {
color: black;
float: left;
padding-left: 25px;
font-size: 12px;
font-weight: bold;
}
.logo > a {
text-decoration: none;
color:black;
}
.banner {
width: 100%;
display:block;
}
.banner > .banner-image {
width: 100%;
display: block;
height: 700;
}
.service1 {
width: 298px;
border: 1px solid #c1c1c1;
margin: 20px 10px;
padding: 0 5px;
float: left;
}
.service1 > p {
font-size: 14px;
color: #636363;
max-width: 200px;
}
.services {
width: 1600px;
margin:0 auto;
}
h1 {
font-size: 16px;
font-weight: bold;
background-color: #c1c1c1;
color: #ffffff;
padding: 10px 0;
margin: 0 -6px;
}
.image {
max-width: 135px;
margin: 15px 0 0 0;
}
.heading {
text-align:center;
font-size: 25px;
color: #000000;
margin:100px 0 50px 0;
font-weight: bold;
}
.image1 {
max-width: 120;
margin: 15px 0 0 0;
}
.image:hover {
opacity: 0.2;
max-width: 200px;
margin-top:15px;
}
.image1:hover {
opacity: 0.2;
max-width: 200px;
margin-top:15px;
}
/* CSS alignment is read as top, left, bottom, right*/