Finding CSS a pain in the **s!

I’m working on a social media clone following Codingphase “Build a Social Media website clone” course. Trying to figure out why the header elements in the social media course for my facebook clone project are not lining up. Joes is using percentages of 20% for the width and his lines up almost perfectly on the header (top blue area). I have been following and coding along and trying to understand what’s going on,but I feel like I’m stuck again. I looked for both the html and main.css to find any erros,(comparing it to Joes) and I couldn’t. Am i missing something here? Feel like a total noob lol
He also jumps around too much and kina rushes things and doesn’t explain them clearly.

More screenshots of my results,the instructors results and index.html and main.css codes below in replies.
Thanks.

1 Like

We can’t work with images.

Please link to a live version of the code on some site, like Codepen, repl.it, Codesandbox, etc.

Edit: It might also be useful if you can link to the tutorial/course, or better yet, a GitHub repo with the final code so we can see that as well.

Ok I will try that in a bit. Currently at work.

Another option is to copy-paste the code in a forum post (I’d still prefer a live version).

Just remember to format the code (use the </> button on the toolbar to add code blocks).

This is the live link to Sandbox. Please check it out.


<html>
    <head>
        <title> Social Media </title> 
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/main.css">

    </head> 

    <body> 

        <header>
             <div class="logo-area">
                <a href="index.html">Logo</a>
             </div> 

             <div class="menu">
                <ul>
                    <li><a href="chloe.html">
                      Chloe  

                    </a>
                    
                    </li> 

                    <li><a href="chloe.html">
                        Home 
  
                      </a>
                      
                    </li> 

                </ul>
            </div> 

            <div class="icon-links">
                <ul class="quick-options">
                    <li><a href="chloe.html">
                    
                        <i class="fas fa-users"></i>
                        

                    </a>
                    
                    </li> 

                    <li><a href="chloe.html">

                        <i class="far fa-comment"></i>
                    
  
                      </a>
                      
                      </li> 

                      <li><a href="chloe.html">
                        
                        <i class="fas fa-bell"></i>
  
                      </a>
                      
                      </li> 
                    
                    <div class="privacy">
                        <i class="fas fa-lock"></i>
                    </div>


                </ul> 

                <div class="search-area">
                    <ul>
                        <li>
                            <i class="fas fa-search"></i>
                        </li> 
    
                        <li> 

                        <input type="text" name="search">
                          
                        </li> 
    
                        <li>
                            <i class="fas fa-times"></i>

                        </li> 
    
    
                    </ul> 
                </div>

            </div> 




        </header>

    </body> 

</html>

type or paste code here
* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
* {
    box-sizing: border-box;
}
html {
    font-family: sans-serif;
}

header {
    background: #3B5998;
    padding: 15px;
} 

header .logo-area {
    color: white;
    display: inline-block;
    width: 20%;

} 

header .logo-area a {
    color: white;
    text-decoration: none;
    font-size: 20px;

}

header .menu {
    display: inline-block;
    width: 20%;
} 

header .menu ul li {
    display: inline-block;

}  

header .icon-links  {
    display: inline-block;
    width: 40%;
}

header .icon-links ul li {
    display: inline-block; 

} 

header .icon-links .quick-options {
    display: inline-block; 
    


} 

header .icon-links .privacy {
    display: inline-block;
}


header .search-area {
    display: inline-block;
    width: 40%;
} 

header .search-area ul li {
    display: inline-block;
}

I would suggest you use flexbox and not inline-block. It gives you much easier centering and space distribution options.

Do you know flexbox? If not, I would really recommend learning it. Just search for flexbox the top links are good and if you click the Videos tab you will get some good videos as well. It is well worth learning, trust me.

I do not know what the final result is supposed to look like so it’s kind of hard for me to post an example.

I’m new to this coding stuff and I am following CodingPhase’s html and css course, he’s basically going through the basics.

I guess the course is old? Otherwise, I don’t know why he would use inline-block so much.

If you can improve on the code that is just an added benefit and you will learn more. I almost never do tutorials 100% like the author. It’s boring and there is usually something I want to do differently. Sometimes a little, sometimes a lot. The more code you change and extra features you add, the more you will learn. If you just type-along you really will not learn as much as you might think you do.

  • Does he give a GitHub repo link? If so please post it.

  • Can you post a screenshot of how the nav should look like when done?

I guess the course is kind of outdated. I think its from 2015-2016. He does touch on flexbox but later on in the course.
I don’t really know if he has a github.
Here is a screenshot of how the finished nav bar should be.

Most authors have a repo with the code so people can check their code against it.

But that does not look done. That is why I asked for the final version, the way it looks when fully coded. I only ask because if I did post some example using flexbox I would like to know what I’m trying to code.

Anyway, looking at the screenshot are you sure you have grouped the elements correctly? It looks to me like the menu and quick-options should be grouped (maybe using the same parent container). I would double-check the HTML and make sure you have the correct elements nested inside the correct containers.

Sorry I misunderstood the question. Here is what I want to make it look like

I’m trying to get the header like that.

Heres the repo code in Github.

https://github.com/codingphasedotcom/courses-files/blob/master/html-css-social-media-site-complete.zip

You do not have the same HTML structure. The original has the privacy div outside (below) the quick-options ul and the icon-links div is closed just after the privacy div.

There are differences in the CSS as well. You have width: 40% on the header .icon-links selector and the original has width:20% (remember the total width is 100% so the elements need to add up to 100%). Last, you are missing the negative margin on all the required selectors (which is the final CSS that will make the inline-block elements share the total width of the header).


Switching this to use flexbox instead would be a big improvement. Using inline-block, percentages and negative margin is pretty old school and not something you really want to replicate in your own projects moving forward. I would suggest you take the time to learn flexbox. It is the most commonly used CSS technique for doing layouts and it will make things a lot easier, cleaner, and more maintainable.

Oh i see I will have to fix that a bit then. Does FreeCodeCamp have any flexbox courses?