For some reason css ignores my aside and article

So I have a bug that make me go nuts. I’m writing the code for my personal website, i have two pages so far: index.html which is complete and about.html which I’m currently working on. I use the same stylesheet for both files called style.css. Problem is, for some unknown reason, I cannot style the article and the section of my about.html, css simply skips over that code bit, It doesn’t even appear on chrome developer tools. Anything else seems to work just fine.

Here’s the HTML :

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
     <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="./css/style.css" >
     <meta charset="utf-8">
     <meta name="viewpoint" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Affordable and professional web design by Alex Fulop">
     <meta name="keywords" content="web design, professional web design, responsive web design, affordable web design">
     <meta name="author" content="Alex Fulop">
     <title>Fulop Web Design | About</title>
</head>

<body>
     <header>
          <div class="headingContainer">
               <div id="branding">
                    <h1> <span class="highlight">Fulop</span> Web Design</h1>
               </div>
               <nav>
                    <ul>
                         <li><a href="index.html">Home</a></li>
                         <li class="current"><a href="about.html">About</a></li>
                         <li><a href="services.html">Services</a></li>
                    </ul>
               </nav>
          </div>
     </header>

     <section id="newsletter">
          <div class="containerNewsletter">
               <h1>Subscribe To My Newsletter</h1>
               <form class="" action="index.html" method="post">
                    <input type="email" placeholder="Enter Your Email">
                    <button type="submit" class="button_1">Subscribe</button>
               </form>
          </div>
     </section>

     <section id="main">
          <div class="container">
               <article class="main-col">
                    <h1 class="page-title">About me</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
               </article>

               <aside id="sidebar">
                    <h3>What I Do?</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
               </aside>
          </div>
     </section>
     <footer>
          <p>Fulop Web Design, copyright &copy; 2019</p>
     </footer>
</body>

</html>

And here the CSS:

* {
     margin: auto;
     padding: 0px;
}

body {
     font-family: 'Roboto Slab', Helvetica;
     font-size: 15px;
     line-height: 1.5;
     /* font: 15px/1.5/arial, helvetica, sans-serif; (same thing) */

     margin: 0px;
     background-color: #0D0D0D;
     color: #F2F2F2;
     width: 80%;
     margin: auto;
}

ul {
     margin: 0px;
     padding: 0px;
}

.button_1 {
     border: 0px;
     background-color: #273240;
     height: 36px;
     font-family: 'Roboto Slab', Helvetica;
     padding-left: 20px;
     padding-right: 20px;
     color: #F2F2F2;
}

.content {
     overflow: hidden;
}

/* header */
header {
     background-color: #A67C87;
     padding-top: 30px;
     min-height: 70px;
     border-bottom: #0D0D0D 30px solid;
}

header a {
     color: #F2F2F2;
     text-decoration: none;
     text-transform: uppercase;
     font-size: 16px;
}

.container {
     background-color: #273240;
}

header li {
     float: left;
     display: inline;
     padding: 0 20px 0 20px;
}

header #branding {
     float: left;
}

header #branding h1 {
     margin-left: 80px;
}

header nav {
     float: right;
     margin-top: 10px;
}

header .highlight, header .current a {
     color: #273240;
     font-weight: bold;
}

header a:hover {
     color: #0D0D0D;
     font-weight: bold;
}

/* Showcase */
#showcase {
     min-height: 400px;
     background: url(../img/showcaseBackground.jpg);
     background-repeat: no-repeat;
     background-size: cover;
     text-align: center;
}

.containerShowcase h1 {
     position: relative;
     top: 100px;
     font-size: 55px;
     bottom: 10px;
     background-color: rgba(38, 38, 38, 0.8);
}

.containerShowcase p {
     position: relative;
     top: 100px;
     bottom: 10px;
     background-color: rgba(38, 38, 38, 0.8);
     font-size: 20px;
}

/* newsletter */
#newsletter {
     border-top: #0D0D0D 30px solid;
}

.containerNewsletter {
     background-color: #A67C87;
     padding-top: 30px;
     min-height: 70px;
}

#newsletter h1 {
     float: left;
     margin-left: 80px;
}

#newsletter form {
     float: right;
     margin-right: 80px;
}

#newsletter input[type="email"] {
     padding: 4px;
     height: 25px;
     width: 250px;
}

/* boxes */

#boxes .box {
     background-color: #273240;
     display: inline-block;
     text-align: center;
     width: 30%;
     padding: 15px;
}

/* sidebar */
aside #sidebar{
     float: right;
     width: 30%;
     margin-top: 10px;
}
/*main-col*/
article #main-col{
     float: left;
     width: 65%;
}
/* footer */
footer {
     padding: 20px;
     margin-top: 20px;
     text-align: center;
}

Sorry if it is badly formated, I am a beginner. Huge thanks to anyone who could lay a hand.

You have a class in html <article class="main-col"> and in css id #main-col. Use one of them id or class in both files.

1 Like

I also think it’s not necessary to have the aside and article in your selector declarations.
You will also need to clear the floats, using a div, so that the footer is displayed on its own row.

<div class = "clear"></div>

/*Clear floats*/
.clear {
  clear: both;
}
1 Like

Thank you my guy, it’s funny how such a tiny mistake can make a such a massive difference, have a great day!

Kinda advanced for me, but I’ll give it a try!!

It’s not advanced, really. It’s an important part of CSS if you are using floats.
Put this before your footer <div class="clear"></div>, and apply that in the above post CSS for its styling.
I’ve just made this diagram. I hope it helps.

2 Likes

Dayum man, thank you for taking the time to explain it to me, it all makes sense now!

A picture is worth a thousand words, right? Well, maybe 150 or so. :slight_smile: