fix(404): fixes a link so that it doesn't go to 404, fix 404 styles

src/pages/developing/angular-tutorial/step-1.mdx

@@ -302,7 +302,10 @@ package.
 
 #### Import and register icons
 
-Now let’s import the icons from our `@carbon/icons` package. To improve tree shaking & keep the size of our app small, import only the required icons. To do so, import `Notification20`, `UserAvatar20`, and `AppSwitcher20` in `app.module.ts`.
+Now let’s import the icons from our `@carbon/icons` package. To improve tree
+shaking & keep the size of our app small, import only the required icons. To do
+so, import `Notification20`, `UserAvatar20`, and `AppSwitcher20` in
+`app.module.ts`.
 
 <!-- prettier-ignore-start -->
 ```javascript path=src/app/header/app.modules.ts
@@ -312,8 +315,13 @@ import AppSwitcher20 from '@carbon/icons/es/app-switcher/20';
 ```
 <!-- prettier-ignore-end -->
 
-Now you need to register the icon via `IconService` that also needs to be imported from `carbon-components-angular` module.
-After importing IconService you need to inject it in component constructor and us it in OnInit life cycle component hook. There are 2 methods for icon registration `.register()` which accepts only one icon and `.registerAll()` which accepts array of icons. As we are going to use more than one icon we are going to use the later method as below.
+Now you need to register the icon via `IconService` that also needs to be
+imported from `carbon-components-angular` module. After importing IconService
+you need to inject it in component constructor and us it in OnInit life cycle
+component hook. There are 2 methods for icon registration `.register()` which
+accepts only one icon and `.registerAll()` which accepts array of icons. As we
+are going to use more than one icon we are going to use the later method as
+below.
 
 <!-- prettier-ignore-start -->
 ```javascript path=src/app/header/header.component.ts
@@ -328,7 +336,8 @@ constructor(protected iconService: IconService) {}
 ```
 <!-- prettier-ignore-end -->
 
-Next step is to import the `IconModule` in the `AppModule` module where the `HeaderComponent` is declared.
+Next step is to import the `IconModule` in the `AppModule` module where the
+`HeaderComponent` is declared.
 
 <!-- prettier-ignore-start -->
 ```javascript path=src/app/header/header.component.ts
@@ -342,7 +351,8 @@ imports: [
 ```
 <!-- prettier-ignore-end -->
 
-Now the icon is ready to be used in template code. Template in `header.component.html` should look like this:
+Now the icon is ready to be used in template code. Template in
+`header.component.html` should look like this:
 
 <!-- prettier-ignore-start -->
 ```html path=src/app/header/header.component.html

src/pages/guidelines/2x-grid/implementation.mdx

@@ -16,7 +16,7 @@ with five default breakpoints and dozens of predefined classes.
 <InlineNotification>
 
 If you’re using `@carbon/styles` or `@carbon/react` there’s no reason to install
-the grid package separately. See our [get started](/get-started/develop/react)
+the grid package separately. See our [get started](/developing/get-started/)
 guide to start building.
 
 </InlineNotification>

src/styles/_overrides.scss

@@ -0,0 +1,9 @@
+[class^='FourOhFour-module--container'] {
+  margin-top: 3rem;
+}
+
+[class^='FourOhFour-module--container'],
+[class^='FourOhFour-module--link'],
+[class^='FourOhFour-module--link']:before {
+  color: $text-inverse !important;
+}

src/styles/index.scss

@@ -9,6 +9,7 @@
 @import 'structured-list';
 @import 'plex-serif';
 @import 'meetups';
+@import 'overrides';
 
 @import 'src/components/ColorBlock/color-block.scss';
 @import 'src/components/ColorGrid/color-grid.scss';