creating services div boxes not aligned side by side

piano0011 · July 27, 2018

hey guys!

I am trying to create a service section and I got it to work before but when I changed the border to make it wider, it doesn't seem to be side by side anymore. Here is my CSS and html file and what it is looking liked at the moment:

 <!DOCTYPE html>
   <html>
   <head>
     <title>PianoCourse101</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" type="text/css" href="style.css">
      <link href="https://fonts.googleapis.com/css?family=Aldrich|Mr+Dafoe" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity=">sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
     <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Lobster" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Lobster|Monoton|Orbitron" rel="stylesheet">
     
   </head>
   <body>
   
   </body>
   </html>   

<section class="main-container">

     <div class="crotchet">
<p>&#x1D15F</p>
</div>
<div class="minim">
<p>&#x1D15E</p>
</div>
<div class="quaver">
<p>&#x1D160</p>
</div>
     
     <div class="pc101"> </div>
    <div class="music"><i class="fas fa-music fa-8x"></i></div></span>

    <div class="sharp"><p>&#9839</p></div>
    <div class="natural"><p>&#9838</p></div>
    <div class="flat"><p>&#9837</p></div>
    

    <div class="main-wrapper">
      <div class="title">
        <br></br>

       <h1>Welcome to PianoCourse101</h1>
     </div>
       <br></br>
    </div>

    <div class="main-wrapper">
      <div class="first">
       <h2>At PianoCourse101, your child can now learn how to play Classical music right from the comfort of your own home! It doesn't matter if your child has no music foundation because there are lessons suitable for beginners and advanced students! Based on the "Bastien Piano Basics series", your child will be able to learn the basic hand positions, posture, finger numbers and letter names!<br></br> There are four levels in the "Bastien Piano Basics" series, beginning with the primer level, which is suitable for beginners. Once your child has completed the primer level, your child will be able to progress to Level 1, follow by Level 2 and Level 3.<br></br>Currently, PianoCourse101 lessons are mainly for children but we also encourage if you are an adult and also wish to learn how to play the piano to join us! In due course, there will also be lessons for adults!</h2>
     </div>
    </div>
    
    <div class="form">
    <form class="signup-form" action="newsletters.php" method="POST">
      <div class="newsletters">
       <label><center>Enter your E-mail Address</center></label>
     </div>
       <br></br>
       <div class="index_form"><center><input type="text" name='email' placeholder="Enter E-mail Address"></center></div>
       <br></br>
       <center><button type="submit" name="submit">Subscribe to PianoCourse101!</button></center>
       <br></br>

    </form>
    </div>


    <img class="snoopy" src="includes/pictures/snoopy.jpg"  alt="snoopy playing the piano" />

   </section>

   <div class="services_main">Services</div>
      <div class="services">
         <div class="service1">
            <h1>Level 1</h1>
            <div class="image">
            <a href="signup.php"><p>&#127929</p></a>
          </div>
            <h3>Purchase the Level 1 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $100<br>Yearly fee: $800</h3>
          </span>
            <div class="service1">
             <h1>Level 2</h1>
            <div class="image">
            <a href="signup.php"><p>&#127931</p></a>
           </div>
           <h4>Purchase the Level 2 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $150<br>Yearly fee: $1300</h4>

          </div>
          <div class="service1">
            <h1>Level 3</h1>
            <div class="image">
            <a href="signup.php"><p>&#127927</p></a>
            </div>
            <h5>Purchase the Level 3 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $200<br>Yearly fee: $1800</h5>
         </div>
      </div>


<span class="index_views"><p>There are <?php echo "<span class='index_views_counter'> $views </span>";?> visitors who have visited <?php echo "<span class='index_views_counter'> $pagename </span>"; ?>!</p></span>


          
</body>
</html>

This is my CSS code:

div.service1 {
  width: 800px;
  border: 1px solid #c1c1c1;
  margin: 20px 50px;
  padding: 0 5px;
  
  float: left;
}

div.service1 > p {
   font-size: 14px;
   color: #000000;
   max-width: 250px;
   padding-top: 30px;
   text-align: justify;
   text-justify: inter-word;
   
}

div.services {
  width: 2500px;
  margin: 0 auto;
  
}

div.services  h1 {
  font-size: 50px;
  font-weight: bold;
  background-color: #c1c1c1;
  color: #000000;
  padding: 10px 0;
  
}

div.image {
  max-width: 300px
  margin: 15px 0 0 0;
  padding-top: 30px;
  
}

div.image h3 {
  position: relative;
  bottom: 300px;
}

div.image h4 {
  position: relative;
  top: 200px;
}

div.services_main {
  text-align: center;
  font-size: 40px;
  color: #6495ED;
  margin: 100px 0 50px 0;
  font-family: 'Aldrich', sans-serif;
   font-family: 'Mr Dafoe', cursive ;
  
}

div.image:hover {
  opacity: 0.2;
  max-width: 200px;
  margin-top: 15px;
}

Edited July 27, 2018 by piano0011

Sign In

creating services div boxes not aligned side by side

Recommended Posts

piano0011

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information