Is There Any Guide on "When to Use Display:Block When :Inline and When :Inline-Block" and Why

display:inline vs display:block

display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).

display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.

Read more about display options : http://www.quirksmode.org/css/display.html

i tried to line my header elements up using css display:inline and inline-block, but nothing i do works

You may wish to make it easier on yourself and utilize either Bootstrap or Flexbox because those tools can help you with alignment desires. With Bootstrap, you'll need to include external resources like bootstrap css; with Flexbox, it's already there. My preference is Flexbox because it provides more flexibility.

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

I mocked up a quick example using your code and making slight additions and modifications. I also presume you wanted the social media icons and the search functionality to float "right" instead of "left". If not, that's easy enough to change.

HTML

<body>
  <div id="wrapper">
    <header>
      <div class="header-utility">
        <div id="logo"></div>

        <div class="social-media-icons">
          <img src="img/fb.png" />
          <img src="img/fb.png" />
          <img src="img/fb.png" />
          <img src="img/fb.png" />
        </div>

        <div class="search-bar">
          <form action="#" method="POST">
            <img src="img/search.png" />
            <input type="text" placeholder="Search" name="search" class="search-input" />
            <input type="submit" value="GO" name="submit" id="submit" class="search-submit" />
          </form>
        </div>
      </div>

      <nav>
        <ul>
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li> |
          <li><a href="">HOME</a></li>
        </ul>
      </nav>

    </header>
  </div>
</body>

CSS

/* GLOBALS */

/* ELEMENT */

body {
  background-color: white;
}

header {
  width: 960px;
  background-color: #336699;
  border-radius: 15px;
  padding: 10px;
}

main {
  background-color: #33FF99;
  border-radius: 15px;
  padding: 10px;
  color: #330099;
}

li {
  display: inline;
  padding: 5%;
}

li > a {
  text-decoration: none;
  color: #33CC99;
}

li > a:hover {
  color: #330066;
}

footer {
  background-color: #336699;
  border-radius: 15px;
  padding: 10px;
  color: #33CC99;
}

/* IDS */

#wrapper {
  border-radius: 15px;
  width: 960px;
  clear: both;
  margin: 0 auto;
  padding-top: 5px;
}

#logo {
  width: 100px;
  height: 100px;
  margin: 5px;
  margin-top: 5px;
  background-color: white;
  border-radius: 15px;
}

/* CLASSES */

.header-utility {
  display: flex;
  align-items: center;
}

.social-media-icons {
  flex-grow: 1;
  text-align: right;
  padding-right: 30px;
}

.search-input,
.search-submit {
  padding: 0px;
  height: 25px;
}

Feel free to play around with the mock as you desire. https://jsfiddle.net/9g6ms7pz/

What's the difference between display:inline-flex and display:flex?

display: inline-flex does not make flex items display inline. It makes the flex container display inline. That is the only difference between display: inline-flex and display: flex. A similar comparison can be made between display: inline-block and display: block, and pretty much any other display type that has an inline counterpart.¹

There is absolutely no difference in the effect on flex items; flex layout is identical whether the flex container is block-level or inline-level. In particular, the flex items themselves always behave like block-level boxes (although they do have some properties of inline-blocks). You cannot display flex items inline; otherwise you don't actually have a flex layout.

It is not clear what exactly you mean by "vertically align" or why exactly you want to display the contents inline, but I suspect that flexbox is not the right tool for whatever you are trying to accomplish. Chances are what you're looking for is just plain old inline layout (display: inline and/or display: inline-block), for which flexbox is not a replacement; flexbox is not the universal layout solution that everyone claims it is (I'm stating this because the misconception is probably why you're considering flexbox in the first place).

¹ _{The differences between block layout and inline layout are outside the scope of this question, but the one that stands out the most is auto width: block-level boxes stretch horizontally to fill their containing block, whereas inline-level boxes shrink to fit their contents. In fact, it is for this reason alone you will almost never use display: inline-flex unless you have a very good reason to display your flex container inline.}

Div inline-block display and proper position after using transform: scale

Here is a quick fix for you

JSFiddle

Just add a div (for example .wrap) around .elements and change its width and height depending on scale like this.

el.parent('.wrap').css({
  width: (350 * scale) + "px",
  height: (500 * scale) + "px"
});

.wrap {
  width: 350px;
  height: 500px;
  display: inline-block;
  position: relative;
}

.elements {
  width: 340px;
  height: 490px;
  background-repeat: no-repeat;
  margin: 5px;
  -moz-transform-origin: 0 0;
  transform-origin: 0 0;
}

display: inline-block forces new line

In my opinion, floats are more suitable for this case.

#wrapper {  width: 100%;  overflow: hidden; /* more reliable way to contain floats                       by creating the isolated Block Formatting Context (BFC)                       more on this: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context */}.block {  display: block;  overflow: hidden; /* new BFC again, now to preven overlapping of regular and floating blocks */}.block_50x100 {  width: 50%;  padding-top: 100%;  background: #0f0;  float: left;}.block_50x50 {  width: 50%;  padding-top: 50%;  background: #00f;}.block_50x50+.block_50x50 {  background: #f00;}

<div id="wrapper">  <div id="b1" class="block block_50x100">  </div>  <div id="b2" class="block block_50x50">  </div>  <div id="b3" class="block block_50x50">  </div></div>

how to display card horizotally inline

Can you please add

.scrollmenu {
  display:flex;
  flex-direction:row;
}

https://www.w3schools.com/csS/css3_flexbox_container.asp