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

Mikedaniel Ocasio
seal-mask
.a{fill-rule:evenodd;}techdegree
Mikedaniel Ocasio
Full Stack JavaScript Techdegree Student 15,790 Points
Posted by Mikedaniel Ocasio
.a{fill-rule:evenodd;}techdegree
Mikedaniel Ocasio
Full Stack JavaScript Techdegree Student 15,790 Points

Aligning individual items in a flex box

So I'm trying to get my name to be on the left and the nav to be on the right using flex. Not sure what I'm doing wrong here? I've tried different methods with flex but I can't seem to figure it out? Any help would be appreciated. Thanks guys

Here's my Code 

<!DOCTYPE html>
<html>
<head>
<title>Responsive Design</title>
<link rel="stylesheet" href="mobilefirst.css" type ="text/css" media="screen">
    <link rel="stylesheet" href="normalize.css" type ="text/css" media="screen">
    <meta name="viewport" 
    content= "width=device-width, initial-scale =1.0, user-scalable = no">
</head>
<body>
<div class="container">

        <nav class="main-nav" id="#TOP">
        <h1 class="Name">Mikedaniel</h1>
            <a href="#">HOME</a>
            <a href="#">PORTFOLIO</a>
            <a href="#CONTACT">CONTACT</a>
        </nav>
<div class="profile">
    <img src = "images/profile.jpg" class="profile_img" alt="projectimg"/>
        <p class="bio"> Hi! I'm a front end developer who loves responsive design and css. I recently finished a degree in front-end web development at Treehouse and am excited to put all my skills to use!</p>
</div>

    <div class="portfolio">
    <!--BEGIN OF PORTFOLIO-->
        <h3>Portfolio</h3>

<div class = "col-4">
    <img src = "images/portfolio-1.png" class="img" alt="projectimg"/>
        <h3>Marketing page</h3>
        <p>This page shows the front page of a marketing website meant for a specific business I'm interested in.</p>
</div>

<div class="col-4">
    <img src = "images/portfolio-2.png" class="img" alt="projectimg">
        <h3>Search page</h3>
        <p>This page shows the front page of a marketing website meant for a specific business I'm interested in.</p>
</div>

<div class="col-4">
    <img src = "images/portfolio-3.png" class="img" alt="projectimg"/>
        <h3>Travel app</h3>
        <p>This page shows the front page of a marketing website meant for a specific business I'm interested in.</p>
</div>

<div class="col-4">
    <img src = "images/portfolio-4.png" class="img" alt="projectimg"/>
    <h3>Map of favorite spots</h3>
        <p>This page shows the front page of a marketing website meant for a specific business I'm interested in.</p>
</div>

<div class="col-4">
    <img src = "images/portfolio-5.png" class="img" alt="projectimg"/>
    <h3>Map of favorite spots</h3>
        <p>This page shows the front page of a marketing website meant for a specific business I'm interested in.</p>
</div>

<div class="col-4">
    <img src = "images/portfolio-6.png" class="img" alt="projectimg"/>
    <h3>Map of favorite spots</h3>
        <p>This page shows the front page of a marketing website meant for a specific business I'm interested in.</p>
</div>

</div>
<!-- END OF PORTFOLIO-->

        <!--BORDERHERE-->
<div class="footer">
    <h3> Contact </h3>

    <p> If you're interested in chatting or want more information about what I've been working on, I'd love to hear from you!</p>
    <p>Phone (000)000-0000</p>
    <p>Email (000)000-0000</p>  
</div>
<!--border here--><div class="bottomlinks">
<p> Mikedaniel</p>
<a href="#TOP">BACK TO TOP</a>
</div>





</div>
</body>
</html>

body {
    background-color: #F7F7F7;
}
p{
line-height: 1.6em;
width: 80%;
display: flex;
margin:2em auto;
justify-content: center;

}
.container {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    font-family: arial;
}
.main-nav{
    display:flex;
    flex-direction: column;
    justify-content: center;
    justify-content: space-between;
    margin-bottom: 2em;
}
.bio {
    color:gray;
}
.main-nav a{
    color:black;
    font-family: arial;
    font-weight: bold;
    background-color: white;
    padding: 14px;
    margin:.2em;
    text-decoration: none;
}
.profile_img {
    width:100%;
    margin-top: 2em;
}
.img{
    margin-top: 
    15px;
    margin-bottom: 15px;

}
.portfolio {
    background-color: white;
    padding: 15px 0;
}
.portfolio img{
    width: 90%;
}

.footer {
    margin: 2em auto;
    width: 100%;
}
.bottomlinks {
    padding-top: 2em;
    padding-bottom: 2em;
    border-top: 1px;
    border-left:0;
    border-bottom: 0;
    border-right: 0;
    border-style: solid;
    border-color: black;
    font-weight: bold;
    font-size: 12px;

}
.bottomlinks a{
    text-decoration: none;
    color:black;

}
.bottomlinks p{
    display: inline;
    margin-right: 50%;

}

/* TABLET */

@media (min-width: 768px) {
.portfolio {
    background-color: white;
}

.main-nav a{
    display: flex;
    flex-direction: row;
    justify-content: center;
    color:black;
    font-family: arial;
    font-weight: bold;
    background-color: transparent;
    padding: 14px;
    margin:.2em;
    text-decoration: none;
}


.main-nav{
    display:flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 2em;
}


.profile_img {
    width:70%;
    margin-top: 0em;
}

.profile {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    vertical-align: center;
    margin-bottom: 2em;
}


[class^="col-"] {
    float: left;
    padding: 0 ;
    background-color: white;
}

.col-4 { width:50%; 

}



.footer {
    width: 60%;
    position: relative; 
    top: 1em;
}

}

/*DESKTOP*/

@media (min-width: 1024px) {
.Name{
display: flex;
justify-content:space-around;
}
.main-nav{
    display:flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    margin-bottom: 2em;
}



    .portfolio {
        margin: 4em 0;
    }

[class^="col-"] {
    margin: 0 auto;
    padding: 0 ;
    background-color: white;
}

.col-1{
    width: 8.333%;    /* calc(100% / 12) */
}

.col-2 {
    width: 16.666%;  /* calc(100% / 12 *2) */
}

.col-3 { 
    width: 24.999%; /*calc(100% / 12 * 3) */
}

.col-4 {
    width: 33.332%; /* calc(100% / 12 * 4) */
}

.col-5 {
    width: 41.665%; /* calc(100% / 12 * 5) */
 }

.col-6 { background-color:red; width:33.332%; 

}
.profile{
    margin: 0 auto;
    width: 60%;
}

.profile img{
    width: 60%;

}

.footer {
position: relative; 
top: 1em;
}

Nav

2 Answers

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

It might be better if you share your workspace. There is a camera icon on top right near the eyeball, you can click on it to take a snapshot and, share the link.

Also, this site explains flex-box really well....

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Erik Nuber
Erik Nuber
20,629 Points

is the nav working at any of the set media queries the way you want it to? Or are they all not correct?

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

I would consider breaking up your styling into either all of these or just the second two.

nav {

}

nav h1{

}

nav a{

}

this way you can get your 

nav {
   display: flex;
   align-items: baseline;
}

nav h1 {
   justify-content: flex-start;
  flex-grow: 2;
}

nav a {
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: flex-end;
   align-content: space-between;
  flex-grow: 1;
  flex-basis: 70%;
}