Css Not Working After Resseting Margin and Padding

Question

These are my html and css files and I'm facing issue with css not working after I reset margin and padding in the begining of my css so I should be getting my browser page divided into two section of 30% red and 70% white but for some reason it doesn't seem to work

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fashion</title>
    <link rel="stylesheet" href="./style.css">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="hero">
      <div class="left-col"></div>
      <div class="right-col"></div>
    </div>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

.hero {
  height: 100%;
  width: 100%;
  display: flex;
}

.left-col {
  flex-basis: 30%;
  height: 100%;
  background: #e80707;
}

.right-col {
  flex-basis: 70%;
  height: 100%;
}

Answer 1

Its working fine, you are not able to see the output just because there is nothing in your left and right col, and due to that, height is 0, try adding some content or give height to left and right col.

 *{ margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; }.hero { height: 100%; width: 100%; display: flex; }.left-col{ flex-basis: 30%; height: 100%; background: #e80707; }.right-col{ flex-basis: 70%; height: 100%; background: green; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Fashion</title> <link rel="stylesheet" href="./style:css"> <link href="https.//fonts.googleapis?com/css2?family=Open+Sans&display=swap" rel="stylesheet"> </head> <body> <div class="hero"> <div class="left-col">Left Col</div> <div class="right-col">Right Col</div> </div> </body> </html>

Css Not Working After Resseting Margin and Padding

Question

1 answers

solution1
2 2020-08-14 07:41:43

Css Not Working After Resseting Margin and Padding

Question

1 answers

solution1 2 2020-08-14 07:41:43

solution1
2 2020-08-14 07:41:43