When I Float the Div to the Right the Screen Messes Up...I'Ve Tried Clear and Some Other Options

Li float left, length dynamic : no border-bottom on the last row

add clear:both only 3n+1 element from the forth element. remove border for the li that is after the forth element from last

ul {  display: block;  width: 100%;  margin: 0;  padding: 0}li {  display: block;  width: 33%;  height: 120px;  float: left;  margin: 0;  padding: 0;  border-bottom: #666 1px solid;  background: #fcc}li:nth-child(3n+1) {  clear:both;}li:nth-last-child(4) ~ li:nth-child(3n+1), li:nth-last-child(4) ~ li:nth-child(3n+1) ~ li {  border-bottom: 0px;}

<ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li>  <li>6</li>  <li>7</li>  <li>8</li></ul>

html layout messed up when i zoom in or out

The reason that it's broken the layout like that is because you're using percentages so that means when you're changing the zoom level the widths are being altered to fit the new size of the page which is what is meant to happen.

Changing your CSS to be fixed to a certain degree will help remedy this issue but won't fully fix everything because of how it's currently working. I'd suggest as a good starting point that you change the container max-width to something suitable for the design to begin with.

#container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

However, you can then use media queries to change the width of the container depending on the screen size which will respond to the page size appropriately. For example, when the screen size becomes smaller to a tablet or mobile, you could do this (as an example).

@media screen and (max-width: 1024px) {

    #container {
        max-width: 960px;
    }

}

Text not wrapping around floated images. But images are wrapping around floated texts

To get a two column layout, you must properly apply floats and clear them. To see how important it is to clear a floated container, see this answer and this

Note that while using floating containers, you should always clear
them before the next container that follows thereby creating a fresh
block formatting context as it is called. Otherwise you will see
unpredictable behavior.

Clear the floats using:

<div style="clear:both"></div>

after each image-para row and use left class for all the images and paragraphs.

See example below:

#wrapper {  width: 70%;  margin: 2% auto;}.photo {  width: 48%;  margin: 1%;}.para {  width: 48%;  margin: 1%;}.left {  float: left;  margin: 1%;}
.header {  position: relative;  top: 0;  width: 100%;  background-color: #D8E8ED;}.heading {  position: relative;  right: 33%;  font-family: helvetica;  font-weight: bold;  font-size: 30px;}.tagline {  position: relative;  right: 33%;  font-family: helvetica;  font-size: 12px;}

<body>
  <div class="header">    <h1 class="heading">Photo Blog</h1>    <p class="tagline">A Collection Of Moments</p>  </div>
  <div id="wrapper">

    <img src="http://placehold.it/200x200" class="photo left">

    <p class="para left">      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in pulvinar elit. Sed vitae justo congue neque consequat volutpat. Pellentesque leo ipsum, ultrices et sem ut, dignissim pellentesque libero. Curabitur in mattis nibh. Nulla non sollicitudin      elit. Vivamus erat eros, egestas eget quam sit amet, malesuada laoreet sapien. Vestibulum at mattis lectus. Curabitur nunc augue, dictum eu fermentum non, dignissim eget diam.Donec facilisis eros felis, quis tristique libero ultricies tincidunt.      Praesent ullamcorper eget dui non hendrerit.    </p>
    <div style="clear:both"></div>
    <p class="para left">      Nunc nec mauris a magna egestas vulputate in vel odio. Nunc purus ligula, suscipit et libero non, rutrum accumsan sapien. Mauris tortor massa, aliquam eu viverra id, interdum eu felis. Integer hendrerit massa quis est molestie consequat. Morbi ultricies,      leo ut euismod cursus, ligula ante sagittis ex, non gravida dui sapien at nunc. Ut at quam faucibus, posuere tortor et, volutpat ante. Sed accumsan ultrices arcu, id efficitur nunc maximus eget.Quisque vel eros semper, mattis magna sed, dignissim      leo.    </p>

    <img src="http://placehold.it/200x200" class="photo left">
    <div style="clear:both"></div>
    <div>      <img src="http://placehold.it/200x200" class="photo left">    </div>
    <p class="para left">      Nunc vel finibus ante. Curabitur finibus, libero et mattis mattis, massa nulla bibendum eros, in maximus lorem elit egestas massa. Duis tellus nibh, aliquet sed vehicula non, elementum at purus. In efficitur venenatis ipsum, eu aliquam ex faucibus a.      Etiam blandit lobortis purus, et egestas diam lobortis a. Duis in iaculis turpis. Nullam turpis nisl, vulputate id mi eu, blandit auctor mi. Aenean volutpat venenatis est nec tempus. In cursus commodo tortor vitae ultrices. Vestibulum sed fermentum      enim. Praesent ac risus eu magna finibus ultricies.Curabitur tristique lobortis sem ut pulvinar. Aliquam et felis nec ipsum tincidunt tempor. Mauris ut sollicitudin lorem. Donec faucibus nisl id iaculis congue.    </p>
    <div style="clear:both"></div>    <p class="para left">      Morbi venenatis, tellus eu euismod efficitur, tellus velit posuere ante, eget tempus ex mi vitae sem. Nam et lorem pellentesque enim vehicula tempus. Maecenas et nibh et eros tincidunt pellentesque non ac ante. Maecenas et neque ex. Aenean placerat, odio      eu faucibus auctor, orci nibh egestas mi, nec imperdiet augue leo quis massa. Vestibulum sed accumsan nulla. Aliquam aliquet sem ante, ut dignissim quam eleifend eu. Nam sit amet dolor iaculis, porttitor arcu in, scelerisque sapien. Nulla auctor      bibendum tincidunt. Fusce blandit eros at auctor congue. Vestibulum magna justo, convallis ut volutpat vitae, fermentum at nisl.    </p>

    <img src="http://placehold.it/200x200" class="photo left">
    <div style="clear:both"></div>  </div>
</body>

Fixed page header overlaps in-page anchors

I had the same problem.
I solved it by adding a class to the anchor element with the topbar height as the padding-top value.

<h1><a class="anchor" name="barlink">Bar</a></h1>

I used this CSS:

.anchor { padding-top: 90px; }

Horizontal Smooth Momentum Scrolling

I've published an API on github that can easily solve this problem, below you'll find the code to do what you want.

Compared to yours I've just added the js code and the <script> in the HTML.

If you want to know more about it, here you can find the documentation.

EDIT

Since the requirements have changed a little bit and the API has been updated I've modified the example below so that it better fits the question.

Main changes to the answer:

Now the js is inside a init() method called onload
The css styles have been modified (transform:rotate brakes most of scrolling APIs)
The support for the navbar's smooth scroll has been added
The scrolling amount now depends on how much the user physically scrolls the mousewheel

/* UPDATED 2022 ANSWER */
function init() {
    /*
     * Variables preparation
     */
    let yourWrapperElement = document.getElementsByClassName("outer-wrapper")[0];
    let whateverEaseFunctionYouWant = remaningScrollDistance => { return remaningScrollDistance / 15 + 1 };

    //Added support for navbar menu's smooth scrolling
    uss.hrefSetup();

    /*
     * As you asked for, we only apply the custom scrolling for desktop devices
     * by using the "wheel" event instead of the "scroll" or "touchmove" events.
     */
    yourWrapperElement.addEventListener("wheel", event => {
      /*
       * We want to overwrite the default scrolling behaviour
       * of your outer-wrapper component.
       */
      event.preventDefault();
      event.stopPropagation();
      uss.scrollXBy(event.deltaY, yourWrapperElement, null, false);             
    }, {passive:false});

    /*
     * We apply a the custom ease function
     * which will be used whenever our component is scrolled by the API
     */
    uss.setXStepLengthCalculator(whateverEaseFunctionYouWant, yourWrapperElement);
}

body {
  margin: 0;
  padding: 0;
}

.outer-wrapper {
  width: auto;
  height: 100vh; /*  Changed to vh */
  width: 100vw; /* Added */
  /*transform: rotate(-90deg) translateX(-100vh); ROTATING containers brakes 90% of scrolling APIs
  transform-origin: top left;*/
  overflow-y: scroll;
  overflow-x: hidden;
  position: absolute;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /*scroll-behavior: smooth; ISN'T NEEDED FOR MY API */
}

::-webkit-scrollbar {
  display: none;
}

.wrapper {
  display: flex;
  flex-direction: row;
  /*width: auto; NOT NEEDED IF WE USE FLEX-SHRINK 0
  transform: rotate(90deg) translateY(-100vh); ROTATING containers brakes 90% of scrolling APIs
  transform-origin: top left;*/
  margin: 0; /* not really needed */
  padding: 0; /* not really needed */
}

.section {
  color: #000;
  flex-shrink: 0; /* ADDED insted of the width/height of the wrapper */
  width: 100vw;
  height: 100vh;
}

#a { background-color: #ccc; }
#b { background-color: #fff; }
#c { background-color: #ccc; }
#d { background-color: #fff; }
#e { background-color: #ccc; }
#f { background-color: #fff; }

h2 {
  text-align: center;
  font-size: 200px;
  margin: 0;
}

/* MENU  _________________________ */

.logo {
  float: left;
}

nav {
  width: 100%;
}

/* HEADER */

header {
  float: left;
  width: 100%;
  position: absolute;
  z-index: 9999;
}

/* HEADER LARGE */

header.large {
  height: 50px;
}

header.large .logo {
  width: 225px;
  height: 50px;
  margin: 20px 0 0 20px;
  background: url('../images/logo-fireqa-green-500px.png');
  background-repeat: no-repeat;
  background-size: contain;

  transition: 0.7s all;
  -moz-transition: 0.7s all;
  -webkit-transition: 0.7s all;
  -o-transition: 0.7s all;
}

/* UNORDERED LIST */

header.large ul {
  list-style: none;
  float: right;
  margin-right: 25px;
}
header.small ul {
  list-style: none;
  float: right;
  margin: 0;
}

header.large li {
  display: inline;
  float: left;
  list-style-position: inside;
  height: 50px;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  transition: all 0.3s ease-in-out;
}

header.large li a {
  display: block;
  padding: 20px;
  color: #0E6245;
  text-decoration: none;
  font-family: 'Montserrat', 'arial', sans-serif;
  font-weight: 600 !important;
  letter-spacing: -1px;
  font-size: 25px;

  background-image: linear-gradient(#0E6245, #0E6245);
  background-position: 50% 80%;
  background-repeat: no-repeat;
  background-size: 0% 4px;

  -moz-transition: all 0.3s ease-in-out 0s;
  -ms-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

header.large li a:hover, a:focus {
  background-size: 60% 4px;
}

<script src = "https://cdn.jsdelivr.net/npm/universalsmoothscroll@latest/universalsmoothscroll-min.js"></script>

<body onload = init()>

<main class="outer-wrapper">
    <div class="wrapper">
        <article class="section" id="a"><h2>01</h2></article>
        <article class="section" id="b"><h2>02</h2></article>
        <article class="section" id="c"><h2>03</h2></article>
        <article class="section" id="d"><h2>04</h2></article>
        <article class="section" id="e"><h2>05</h2></article>
        <article class="section" id="f"><h2>06</h2></article>
    </div>
</main>

<!-- MENU _____________________ -->

<header class="large">
    <div class="container">
      <nav>
        <a><div class="logo"></div></a>
          <ul>
            <li><a href="#a">01</a></li>
            <li><a href="#b">02</a></li>
            <li><a href="#c">03</a></li>
            <li><a href="#d">04</a></li>
         </ul>
      </nav>
    </div>
  </header>

  </body>
</html>