CSS CSS Layout Basics CSS Layout Project Column Layout with Media Queries

Robert Rydlewski
Robert Rydlewski
3,826 Points

problem with displaying col in medium and bigger display :(

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Best City Guide</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <header class="main-header ">
    <div class="container clearfix">
        <h1 class="name"><a href="#">Best City Guide</a></h1>
        <ul class="main-nav">
            <li><a href="#">ice cream</a></li>
            <li><a href="#">donuts</a></li>
            <li><a href="#">tea</a></li>
            <li><a href="#">coffee</a></li>
        </ul>
    </div>
    </header><!--/.main-header-->   

    <div class="banner">
        <img class="logo" src="img/city-logo.svg" alt="City">
        <h1 class="headline">The Best City</h1>
        <span class="tagline">The best drinks and eats in the best city ever.</span>
    </div><!--/.banner-->


  <div class="container clearfix">
       <div class="secondary col">
      <h2>Welcome!</h2>
        <p>Everything in this city is worth waiting in line for.</p>
        <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
        <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
    </div><!--/.secondary-->

    <div class="primary col">
        <h2>Great food</h2>
        <img class="feat-img" src="img/treats.svg" alt="Drinks and eats">
        <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
    </div><!--/.primary-->

    <div class="tertiary col">
        <h2>How to get here</h2>
        <p><strong>Plane: </strong>Tiramisu caramels gummies chupa chups lollipop muffin. Jujubes chocolate caramels cheesecake brownie lollipop drag&#233;e cheesecake.</p>
        <p><strong>Train: </strong>Pie apple pie pudding I love wafer toffee liquorice sesame snaps lemon drops. Lollipop gummi bears dessert muffin I love fruitcake toffee pie.</p>
        <p><strong>Car: </strong>Jelly cotton candy bonbon jelly-o jelly-o I love. I love sugar plum chocolate cake pie I love pastry liquorice.</p>

    </div><!--/.tertiary--> 
   </div>
    <footer class="main-footer">
        <span>&copy;2015 Residents of The Best City Ever.</span>
    </footer>

</body>
</html>```

```css
/*
  If you get stuck, feel free to watch the follow-up videos where I'll show you one solution
*/

/* ================================= 
  Base Element Styles
==================================== */

* {
    box-sizing: border-box;
}

body {
    font-family: 'Varela Round', sans-serif;
    line-height: 1.6;
    color: #3a3a3a;
}

p {
    font-size: .95em;
    margin-bottom: 1.8em;
}

h2,
h3,
a {
    color: #093a58;
}

h2,
h3 {
    margin-top: 0;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */
.name {
    font-size: 1.25em;
  margin: 0;
}


.main-nav {
  margin-top: 5px;
}

.name a,
.main-nav a {
    text-align: center;
    display: block;
    padding: 10px 0px;
}

.main-nav a {
    font-size: .95em;
    color: #3acec2;
    text-transform: uppercase;
    padding: 1rem;
}

.main-nav a:hover {
    color: #093a58;
}




/* ---- Layout Containers ---- */

.main-header {
 padding-top: .5em;
 padding-bottom: .5em; 
}

.banner,
.main-footer {
  text-align: center;
}

.banner {
    color: #fff;
    background: #3acec2;
  padding: 3.2em 0;
  margin-bottom: 60px;  
}

.col {
  margin-left: 1em;
  margin-right: 1em;
}



.main-footer {
    background: #d9e4ea;
    padding: 2em 0;
    margin-top: 30px;
}



/* ---- Page Elements ---- */

.logo {
    width: 190px;

}

.headline {
  margin-bottom: 0;
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {



    /* ---- Float clearfix ---- */

    .clearfix::after {
        content: " ";
        display: table;
        clear: both;
    }

.container {
  width: 90%;
  margin: 0 auto;
}

.name, 
.col  { 
  float: left;
}

.primary, 
.secondary {   
  width: 50%;
}

.main-nav {
  float: right;
}

.main-nav li {
  display:  inline-block;
  margin-right: 15px;
}

.tagline {
  font-size: 1.4em;
  }

}

@media (min-width: 1025px) {

.container {
    width: 80%;
    max-width: 1150px;
}

  .primary { 
  width: 40%;
}

  .secondary,
  .tertiary {
    width: 30%;
}
}

This is a chalange code. I followed the instructor code and reaped it 5 times. I can't find the issue in the developer tool. Please help