CSS flexbox project

Hello everyone happy friday from Madrid,

New topic, new problem. I am having issues with flex properties. When I apply it to my div it goes above the margin of the div and I can’t fix it, meaning that I can’t and don’t know how to properly align them how I want. In this case 3 images top and 2 images down inside of their parent div margin. With this said if somebody can take a look at the code and give a hint of what could be wrong here? Thanks!

Flex Box Project link

Before we get to what the possible issues may be, please consider these style guide pointers…

<header class = "header">

HTML is not like script or programming code. Because it is generally much more verbose we tend to avoid whitespace.

<header class="header">

The only space character(s) is(are) the one(s) preceding the attribute name.

While browsers are fairly reliable in the recognition of an unquoted attribute values, markup without quotes is not upwardly compatible with stricter XML rules. We can avoid this by never writing attributes without quotes. Booleans are another animal.

<img src=img/img-tea-cozy-logo.png alt="Tea Cozy Logo">

versus,

 <img src="img/img-tea-cozy-logo.png" alt="Tea Cozy Logo">

We would never leave empty the most important element in the page…

<title></title>

versus,

<title>Tea Cozy</title>

There is a secondary concern with one of the elements mentioned above…

<header class="header">

There is enough information in the TYPE to be able to select this element. Do we need a class attribute? Only when there is more than one <header> element in the page do we need to single it out. TYPE selectors have the lowest specificity, so should be the base selectors before dialing in to a particular element.

If we know we only have one HEADER, then,

header {

}

is as much rule as we need. We can still dial in to the child elements…

header {

}
header h1 {

}
header h2 {

}
header nav {

}

The latter assumes the page nav is inside the header which may not normally be the case, but there is no hard rule against it. We can still isolate from the rest of the document with that simple combinator selector.

1 Like