FlexBox Won't align to the start of container.

Question

Ok so for an extreme example I set the margin of both the child div's inside of the parent "flexbox" container to 0 in the largest breakpoint, what I don't understand is the left child div won't fully align to the top of the parent div whereas the right one will. Help me please!! I tried the align self and align items I feel like it might have something to do with margins or padding set in a previous breakpoint but idk. Thanks in advance..

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Jeriah Bowers || Web Developer</title>
    <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <div id="heading">
          <p>Hello people, my name is</p>
          <h1>Jeriah Bowers</h1>
          <p>Web Developer, Designer &amp; Golf Addict</p>
      </div>
    </header>
  <div id="container">
    <div id="mainContent">
        <h1>About Me</h1>
        <p> <img src="img/jeriah.jpg" height="300" width="300"> Why hello there! *Star Wars reference* My name is Jeriah and here is a little backstory about me, and more specifically about why I chose this carrer path. I've always been known as the guy who takes calculated risk when it comes to big decisions whether that be buying a car or in this case choosing a career where not only I would love what I do, but also be in a field that encourages growth. And for that reason I didn't even start coding until 2016 after talking with an individual I trust who's a developer and then reading some material he suggested about front-end development, and after reading it and coding some HTML I knew this is what I wanted. And here we are 1 and 1/2 years and 10 languages/frameworks later. And I'm ready to prove myself as a developer.</p>
    </div> <!-- Main Content Div End -->
    <div id="portfolio">
       <h1>Portfolio</h1> 
       <ul>
           <li><a href="https://jer1ah.github.io/Photo_Gallery_Project/" target="_blank"><h2>LightBox Photo Gallery</h2><p>In this application I used a jQuery lightbox to display photos and also have an input field to filter photos based on their captions.</p><img src="img/lightbox.jpg" height="200" width="290"></a></li>
           <li><a href="https://jer1ah.github.io/Video-Player-Project/" target="_blank"><h2>MEJS Video Player</h2><p>In this project I used the MEJS jQuery plugin and then some custom jQuery to highlight the captions as the video plays.</p><img src="img/video-player.png" height="200" width="290"></a></li>
           <li><a href="https://jer1ah.github.io/Ajax-Project/" target="_blank"><h2>Random User Generator</h2><p>This application retrieves random users from an API using AJAX then displays them and when clicked a lightbox with more information appears using custom jQuery.</p><img src="img/ajax.png" height="150" width="290"></a></li>
           <li><a href="https://jer1ah.github.io/WebApp-Dashboard-Project/" target="_blank"><h2>DashBoard Website</h2><p>This is a simple WeApp DashBoard using some vanilla js to create some form validations and a popup alert. Also used SASS in this particular website.</p><img src="img/dashboard.png" height="150" width="290"></a></li>
       </ul>
    </div> <!-- Portfolio Div End -->
  </div> <!-- Container Div End -->
    <div id="social">
        <a href="https://www.instagram.com/jer1ah/?hl=en" target="_blank"><img src="img/instagram.png" alt="Instagram Icon"height="75"></a>
        <a href="https://www.facebook.com/Jman197" target="_blank"><img src="img/facebook.png" alt="FaceBook Icon" height="75"></a>
        <a href="https://github.com/Jer1ah" target="_blank"><img src="img/github.png" alt="GitHub Icon" height="75"></a>
        <a href="https://www.linkedin.com/in/jeriah-b-2b809990/" target="_blank"><img src="img/linkedin.png" alt="Linkedin Icon" height="75"></a>
    </div> <!-- Social Div End -->  
    <footer><span>&copy;Jeriah Bowers</span></footer>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  </body>
</html>

And the CSS

/*-- Basic Styles --*/
* {
    box-sizing: border-box;
    margin: 0;
    text-decoration: none;
    list-style-type: none;
    font-family: 'Montserrat', sans-serif;
}


/*-- Header/Nav Styles --*/

header {
    height: 575px;
    background: linear-gradient(#aaa 1%, transparent 80%),
        url("../img/mountains.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    padding: 1px;
}

#heading {
    color: #eee;
    margin-top: 100px;
    text-align: center;
}

#heading h1 {
    margin: 20px 0;
    font-size: 5em;
}

#heading p {
    font-size: 1.2em;
}

/*-- About Me Styles --*/

#mainContent {
    width: 90%;
    margin: auto;
}

#mainContent h1 {
    text-align: center;
    margin: 85px 0 30px; 
    font-size: 3.1em;
    color: #333;
}

#mainContent p {
    font-size: 1.3em;
    line-height: 1.6em;
    color: #333;
    text-align: center;
}

#mainContent img {
    border-radius: 3px;
    display: block;
    margin: 15px auto;
}


/*-- Social Div Styles --*/


#social {
    background-color: #eee;
    padding: 10px 0;
    margin-top: 75px;
}

#social img {
   margin: 25px auto; 
   display: block;
   height: 65px;
}


/*-- Portfolio Styles --*/


#portfolio h1 {
    font-size: 3.1em;
    text-align: center;
    margin: 70px 0 30px;

}

#portfolio li {
    width: 95%;
    background-color: #eee;
    text-align: center;
    margin: 35px auto;
    padding: 10px;
    border-radius: 1px;
    border: 2px solid #ccc;
    min-height: 350px;
    max-width: 425px;
}

#portfolio li:hover {
    background-color: #ccc;
    cursor: pointer;
}

#portfolio h2 {
    margin: 10px auto;
}

#portfolio p {
    margin-bottom: 10px;
    font-size: 1em;
}

#portfolio ul {
    list-style: none;
    padding: inherit;
}

#portfolio a {
    color: #222;
}


/*-- Footer Styles --*/

footer {
    height: 110px;
    background-color: #333;
}

footer span {
    font-size: 1.1em; 
    float: right;
    margin-top: 50px;
    margin-right: 20px;
    color: #ccc;
}


/*-- Media Queries --*/

@media (min-width: 750px) {

    #mainContent img {
        display: inline-block;
        float: left;
        margin: 10px 20px;
    }

    #mainContent p {
        text-align: left;
    }

    #mainContent {
        max-width: 70%;
    }

    #heading {
        margin-top: 150px
    }

    #social {
        display: flex;
        justify-content: center;
        height: 100px;
        align-items: center;
    }

    #social a {
        margin: 0 30px;
    }

    #social img {
        height: 55px;
    }

}

@media (min-width: 1000px) {

    #portfolio ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #portfolio li {
        margin: 20px;
    }
}


@media (min-width: 1395px) {
    #container {
        display: flex;
        flex-direction: row;;
        min-height: 1000px;
        align-content: flex-start;
    }

    #portfolio {
        flex: 2;
        margin-left: 50px;
    }

    #mainContent {
        flex: 1;
        margin-left: 50px;

    }

    #mainContent img {
        width: 200px;
        height: 230px;
    }

    #mainContent h1 {
        margin-top: 0;
    }

    #portfolio li {
        height: 300px;
        width: 370px;
    }

    #portfolio h1 {
        margin-top: 0;
    }

    #portfolio img {
        width: 200px;
        height: 150px;
    }
}

Answer 1 · 2018-02-23T03:49:12Z

February 23, 2018 3:49am

I see where you set the left margin to 50, but not where you set any margin to 0. But if you eliminate the top margin you'll see instant alignment.

    #mainContent {
        flex: 1;
        margin-left: 50px;
        margin-top: 0;     /* <-- add this */
    }

This might be a good time to add browser dev tools to your skill set as a developer!

Welcome to the Treehouse Community

Looking to learn something new?

Jeriah Bowers

Jeriah Bowers

FlexBox Won't align to the start of container.

1 Answer

Steven Parker

Steven Parker