Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Techniques Flexbox Layout Build a Navigation with Flexbox

alina antemir
alina antemir
6,111 Points
Posted by alina antemir
alina antemir
6,111 Points

.main-logo:first-child { margin-right: 50px; }

Hello,

I noticed that after I wrote .main-logo:first-child { margin-right: 50px; } when I checked the screen for max-width: 768px, the logo button was having a different width comparing to the rest of the links. It became shorter. After I comment this out it came back to the normal size. Why is that? Do I need to change something in the Media Queries after giving this margin-right value?

2 Answers

Joe Bruno
Joe Bruno
35,909 Points
Joe Bruno
Joe Bruno
35,909 Points

Hello Alina,

Can you post your html? What is the width of ".main-logo" set to?

alina antemir
alina antemir
6,111 Points
alina antemir
alina antemir
6,111 Points

Hi Bruno,

.main-logo { width: 120px; }

html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Alina Antemir</title> <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <div class="main-wrapper">

        <header class="main-header">
            <ul class="main-nav">
                <li class="main-logo"><h1><a href="">Logo</a></h1></li>
                <li><a href="#" data-icon="&#xe900">Link1</a></li>
                <li><a href="#" data-icon="&#xe958">Link2</a></li>
                <li><a href="#" data-icon="&#xe9e3">Link3</a></li>
                <li><a href="#" data-icon="&#xe955">Link4</a></li>
            </ul>
        </header>

        <div class="main-banner">
            <h1>Alina Antemir</h1>
            <h2>Front-end developer</h2>
        </div>

        <div class="primary-content col">
            <h2>Primary Content</h2>
            <p>Learn how the display property can be used to layout and align elements on the page. We’ll cover the block, inline and inline-block methods, along with a few tips on using the table and table-cell values to create vertically aligned content.</p>
        </div>
        <div class="secondary-content col">
            <h2>Secondary Content</h2>
            <p>Learn how the display property can be used to layout and align elements on the page. We’ll cover the block, inline and inline-block methods, along with a few tips on using the table and table-cell values to create vertically aligned content.</p>
        </div>

        <footer class="main-footer">
            <a href="#"><img class="social-icon" src="img/twitter-wrap.png" alt="twitter"></a>
            <a href="#"><img class="social-icon" src="img/instagram-wrap.png" alt="instagram"></a>
            <a href="#"><img class="social-icon" src="img/facebook-wrap.png" alt="facebook"></a>
            <p>&copy; 2015 Alina Antemir.</p>
        </footer>
    </div>
<body>

</html>

css:

/* Page styles ================================*/

body { font: normal 1.1em/1.5 sans-serif; color: #222; background-color: #edeff0; }

/.main-wrapper { width: 90%; margin: auto; }/

html, body, .main-wrapper, .col { height: 100%; } /* sa schimb */

  • { box-sizing: border-box; }

/* Layout Element Colors ================================*/

.main-header { background-color: #384047; } .main-nav .main-logo a {background-color:#5fcf80;} .main-nav a { background-color: #3f8abf; }

/* Header, Banner and Footer Layout ========================================*/

.main-header { padding: 20px; /white-space: nowrap;/ /display: table;/ width: 100%; /* de aici am adaugat - inainte era bine*/ min-height: 120px; }

.main-banner { background: #ebedee; text-align: center; padding: 35px 15px; }

/.main-logo, .main-nav { display: table-cell; vertical-align: middle; }/

.main-logo a, .main-nav a { color: white; text-decoration: none; display: block; /increases the hover area/ text-align: center; padding: 5px 15px; border-radius: 5px; }

.main-logo { width: 120px; }

.main-logo:first-child { /margin-right: 50px;/ -webkit-flex-grow: 1.5; flex-grow: 1.5; }

.main-nav a::before { font-family: 'icomoon'; content: attr(data-icon); color: #fff; position: absolute; top: 10px; }

.main-nav li { -webkit-align-self: center; align-self: center; flex-grow: 1; -webkit-flex-grow: 1; margin-right: 8px; margin-left: 8px; }

.main-nav { padding-left: 50px; }

.main-logo, .main-nav li { border-radius: 5px; }

.main-nav { display:-webkit-flex; height: 100%; }

.main-nav li { align-self: center; }

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

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

/* Column Layout ========================================*/

.col { display: inline-block; padding: 20px; margin-right: -5px; vertical-align: top; }

.primary-content { width: 60%; }

.secondary-content { width: 40%; }

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

@media (max-width: 768px) { .main-logo, .main-nav, .main-nav li, .col { display: block; height: initial; width: initial; margin: initial; } .main-nav { padding-left: initial; } .main-nav li { margin-top: 15px; } .main-banner { display: none; /pot sa il comentez daca vreau sa nu dispara/ } }