what's wrong with my code ?

Question

<!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 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>
    </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> <!-- end container -->

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

</body>
</html>

/* ================================= 
  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;
}
h1,
h2,
h3 {
    margin-top: 0;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
  max-height:422px;
}

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

/* ---- Navigation ---- */

.name {
    font-size: 1.25em;
}

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

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

}

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

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

.banner {
    color: #fff;
    background: #3acec2;
  padding:40px 0;
}

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

  margin:50px 10px;
}
/* ---- Page Elements ---- */

.logo {
    width: 190px;
}

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

@media (min-width: 769px) {
.name{
  float:left;

}
.main-nav li{
 float:right;
 margin-left:1.5em;
}
.container{
  width:80%;
  max-width:1300px;
  margin:50px auto; 
}

}
.primary{
  width:50%;
  float:left;
}
.secondary{
  width:25%;
  float:left;
}
.tertiary{
  width:25%;
  float:right;
}
.col{
  padding:0 20px ;
}
    /* ---- Float clearfix ---- */

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

}
@media (min-width:769px) and (max-width:1500px){
.tertiary{

  float:none;
}
.secondary{
  width:50%;
  float:left;

}
.primary{
  width:50%;
  float:right;
}
}

hey guys can someone tell what wrong with my second media query i can't cleat the float of my third column nor resize the columns ?

fixed my css FINALLY !! it was an extra bracket :'( any reviews for my code ?

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

.banner {
    color: #fff;
    background: #3acec2;
  padding:40px 0;
}

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

  margin:50px 10px;
}
/* ---- Page Elements ---- */

.logo {
    width: 190px;
}

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

@media (min-width: 769px) {
.name{
  float:left;

}
.main-nav li{
 float:right;
 margin-left:1.5em;
}
.container{
  width:80%;
  max-width:1300px;
  margin:50px auto; 
}


.primary{
  width:50%;
  float:left;
}
.secondary{
  width:25%;
  float:left;
}
.tertiary{
  width:25%;
  float:right;
}
.col{
  padding:0 20px ;
}
    /* ---- Float clearfix ---- */

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

}
@media (min-width:769px) and (max-width:1360px){
.tertiary{
  width:100%;
  clear:both;
  float:none;
}
.secondary{
  width:50%;
  float:left;

}
.primary{
  width:50%;
  float:right;
}
}

amin mbarki

amin mbarki

what's wrong with my code ?

James Akpan

James Akpan