CSS CSS Layout Basics Controlling Layout with CSS Display Modes Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding

Mukund Narasimhan
PRO
Mukund Narasimhan
Pro Student 9,332 Points

https://w.trhou.se/b1m18us5qh when i reduce the screen size header elements are not coming inline

https://w.trhou.se/b1m18us5qh

when i reduce the screen size header elements are not coming inline can an 1 help me out

Julian Gutierrez
Julian Gutierrez
19,200 Points

What are you wanting to accomplish? Are you wanting to keep the navigation elements inline at smaller screens, in a row?

1 Answer

jason chan
jason chan
31,004 Points
/* ================================= 
  Base 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.5em;
}

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

h2,
h3 {
    margin-top: 0;
}

a {
    text-decoration: none;
}

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

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

.name {
    font-size: 1.25em;
}

.name,
.main-nav li {
    text-align: center;
    background: #fff;
    margin-top: 6px;
    margin-bottom: 6px;
}

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

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

.name a,
.main-nav a {
    padding: 10px 15px;
    display: block;
}

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

.container {
    padding-left: 1em;
    padding-right: 1em;
}

.main-header {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    background: #3acec2;
    margin-bottom: 30px;
}

.main-footer {
    text-align: center;
    padding: 2em 0;
    background: #d9e4ea;
}

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

@media (min-width: 769px) {

    .wrap {
        min-height: calc(100vh - 89px);
    }

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

    .name,
    .main-nav,
    .main-nav li {
        display: inline-block;
    }

    .name {
        width: 240px;
        margin-right: 50px;
    }

    .main-nav li {
        margin-right: 12px;
    }

}
<!DOCTYPE html>
<html>
<head>
    <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>
    <div class="wrap">

        <header class="main-header">
            <div class="container">
                <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>

        <div class="container"> 

            <div class="primary 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><!--/.primary-->

            <div class="secondary col">
                <h2>Great food</h2>
                <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>
                <p> Fruitcake jelly-o croissant souffl&#233;. Biscuit jujubes drag&#233;e. Sesame snaps tootsie roll chocolate bar cake tart macaroon pudding. Ice cream gummies jujubes cupcake. Cake marshmallow cookie lollipop tart.</p>
            </div><!--/.secondary-->

        </div><!--/.container-->

    </div><!--/.wrap-->

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

Make sure everything is typed correctly.