Corrected capitalization, corrected to American spellings and typos (#30685)

* Translate challenge subtitles and example challenge text to Spanish

* Corrected errors in syntax and punctuation

* Multiple corrections of it/s to its plus other grammar corrections

* Correction and added paragraph to CSS Flex article

* Corrected my own typo

* Corrected capitalization, American spellings and typos

guide/english/css/css-preprocessors/index.md

@@ -5,7 +5,7 @@ title: CSS Preprocessors
 ## CSS Preprocessors
 
 <!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
-CSS Preprocessors are increasingly becoming a mainstay in the workflow of front end web developers. CSS is an incredibly complicated and nuanced language, and in an effort to make it's usage easier, developers often turn to using preprocessors such as SASS or LESS.
+CSS Preprocessors are increasingly becoming a mainstay in the workflow of front end web developers. CSS is an incredibly complicated and nuanced language, and in an effort to make its usage easier, developers often turn to using preprocessors such as SASS or LESS.
 
 CSS Preprocessors compile the code which is written using a special compiler, and then use that to create a css file, which can then be refereneced by the main HTML document. When using any CSS Preprocessor, you will be able to program in normal CSS just as you would if the preprocessor were not in place, but you also have more options available to you. Some, such as SASS, has specific style standards which are meant make the writing of the document even easier, such as the freedom to omit braces if you choose to do so. 
 

guide/english/css/css3-flexible-box/index.md

@@ -2,7 +2,7 @@
 title: CSS3 Flexible Box
 ---
 ## CSS3 Flexible Box
-The Flexbox model provides for an efficient way to layout, align, and distribute space among elements within your document — even when the viewport and the size of your elements is dynamic or unknown.
+The Flexbox model provides for an efficient way to lay out, align, and distribute space among elements within your document  - even when the viewport and the size of your elements is dynamic or unknown.
 
 The most important idea behind the Flexbox model is that the parent container can alter its items' width/height/order to best fill the available space. A flex container expands items to fill available free space, or shrinks them to prevent overflow.<sup>1</sup>
 
@@ -19,18 +19,25 @@ Flexbox can be used to center any amount of given elements inside one element. A
 }
 ```
 
-Let's break down this example. First we set the display property to "flex" so we can apply our flexbox properties. Next we declare the way flexbox will handle our elements. This can either be in a row, or in a column. Setting it to row will align the elements horizontal inside the element. The column will align them vertical.
+Let's break down this example. First we set the display property to "flex" so we can apply our flexbox properties. Next we declare the way flexbox will handle our elements. This can either be in a row or in a column. Setting it to row will align the elements horizontal inside the element. The column will align them vertical.
+
+Now lets have a short look at "justify-content". This property declares how elements are distributed inside the parent element. We chose the "center" value. This means all elements inside this element will be centered. "Flex-start" will align everything to the left, and "flex-end" to the right.
+
+There are three slightly more interesting options for `justify-content` you might want to try out. "space-between" will evenly space the children out across the available space, pushing the outermost children to the edges. "space-evenly" ensures the same amount of space between the items; this can look a little more centralized. "space-around" gives them equal space all around themselves, a little like a margin - two adjacent children will have double the space where they touch, and only a single amount where they're alongside the border.
+
+`justify-content` defines the behavior of child elements on the main axis. What about vertical? This is where you'll need `align-items`, which defines how items lie on the cross-axis. Keep in mind that whether you're in a row or a column will determine what your main and your cross axis is.
+
+`flex-start`, `center` and `flex-end` behave as before - left, center and right have become top, center and bottom. Other options are `baseline`, whereby all children will centralize themselves down a single baseline, and `stretch`, whereby they will stretch to fill the container.
 
-Now lets have a short look at "justify-content". This property declares how elements are distributed inside the parent element. We chose the "center" value. This means all elements inside this element will be centered.
 
 #### More Information:
 To get a complete understanding of Flexbox, read <a href="https://medium.freecodecamp.org/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af" target='_blank' rel="nofollow">Understanding Flexbox Everything you need to know</a> on the FreeCodeCamp Medium page.
 
 For an interactive guide go through <a href="https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676" target="_blank" rel="nofollow">The Ultimate Guide to Flexbox — Learning Through Examples</a>
 
-Both of these are great resources by Ohans Emmanuel. 
+Both of these are great resources by Ohans Emmanuel.
 
-Yet another great visual guide that is in-depth but easy to follow can be found in <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank" rel="nofolow"> A Guide to Flexbox</a> by <a href="https://css-tricks.com" target="_blank" rel="nofolow">CSS-Tricks</a>
+Yet another great visual guide that is in-depth but easy to follow can be found in <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank" rel="nofollow"> A Guide to Flexbox</a> by <a href="https://css-tricks.com" target="_blank" rel="nofolow">CSS-Tricks</a>
 
 ### Sources
 

guide/english/css/css3-shadow-effects/index.md

@@ -8,7 +8,7 @@ With CSS3 you can create two types of shadows: `text-shadow` (adds shadow to tex
 ### CSS3 Text Shadow
 The `text-shadow` property can take up to four values:
 * the horizontal shadow
-* the vertical shadow 
+* the vertical shadow
 * the blur effect
 * the color
 
@@ -39,14 +39,14 @@ h1 {
 	text-shadow: 0 0 3px #F10D58, 0 0 7px #4578D5;
 }
 ```
-![Multiple shadows examaple with white text](https://raw.githubusercontent.com/nawnaw7/FCC-guides-CSS3-shadows-images/master/CSS3%20Shadow%20Effects%20Images/text-shadow3.png)
+![Multiple shadows example with white text](https://raw.githubusercontent.com/nawnaw7/FCC-guides-CSS3-shadows-images/master/CSS3%20Shadow%20Effects%20Images/text-shadow3.png)
 
 
 ### CSS3 Box Shadow
 The `box-shadow` property can take up to six values:
 * (optional) the `inset` keyword (changes the shadow to one inside the frame)
 * the horizontal shadow
-* the vertical shadow 
+* the vertical shadow
 * the blur effect
 * the spreading
 * the color

guide/english/css/layout/grid-layout/index.md

@@ -11,7 +11,7 @@ It can automatically assign items to _areas_, size and resize them, take care of
 
 - You can easily have a 12-column grid with one line of CSS. `grid-template-columns: repeat(12, 1fr)`
 - Grid lets you move things in any direction. Unlike Flex, where you can move items either horizontally (`flex-direction: row`) or vertically (`flex-direction: column`) - not both at the same time, Grid lets you move any _grid item_ to any predefined _grid area_ on the page. The items you move do not have to be adjacent.
-- With CSS Grid, you can **change the order of HTML elements using only CSS**. Move something from top to the right, move elements that were in footer to the sidebar etc. Instead of moving the `<div>` from `<footer>` to `<aside>` in the HTML, you can just change it's placement with `grid-area` in the CSS stylesheet.
+- With CSS Grid, you can **change the order of HTML elements using only CSS**. Move something from top to the right, move elements that were in footer to the sidebar etc. Instead of moving the `<div>` from `<footer>` to `<aside>` in the HTML, you can just change its placement with `grid-area` in the CSS stylesheet.
 
 ### Grid vs. Flex
 

guide/english/css/object-fit/index.md

@@ -3,7 +3,7 @@ title: Object Fit
 ---
 # Object Fit
 
-The `object-fit` property specifies how an element responds to the width / height of it's parent box.
+The `object-fit` property specifies how an element responds to the width / height of its parent box.
 
 This property can be used for image, video, or any other media. It can also be used with the `object-position` property to get more control on how the media is displayed.
 

guide/english/css/properties/color-property/index.md

@@ -59,7 +59,7 @@ h1{
 ## CSS Color Properties explained
 
 * Colors by Name:
-    - These are pretty self explanatory. Each color is represented by it's name.
+    - These are pretty self explanatory. Each color is represented by its name.
 
 * Hexadecimal:
     - These colors are represented by hex triplets. 

guide/english/css/properties/width-property/index.md

@@ -3,7 +3,7 @@ title: Width Property
 ---
 ## Width Property
 
-The width property sets the width of an element. It can be a keyword value, a length value (any value followed by a CSS unit like px or em), percentage, or it can be inherited by it's parent. By default, it's value is auto.
+The width property sets the width of an element. It can be a keyword value, a length value (any value followed by a CSS unit like px or em), percentage, or it can be inherited by its parent. By default, its value is auto.
 
 **Note**: The width property does not include padding, borders, or margins; it sets the width of the area inside the padding, border, and margin of the element!
 

guide/english/css/text-indent/index.md

@@ -20,7 +20,7 @@ The `text-indent` property can also inherit from its parent element using `inher
 For example:
 - `text-indent: inherit;`
 
-The 'text-indent' property can be reset to it's initial CSS property default value.
+The 'text-indent' property can be reset to its initial CSS property default value.
 
 For example: 
 - 'text-indent: initial;'