HELP ME! Responsive project - 4. 1 (layout test failing)

Responsive design project 4: Technical documentation. It passes all the tests except for the layout ( nav bar on the left). Please help me where did I go wrong?

Let me attach the complete code

<html>

<style>
*{
  box-sizing:border box;
}
body{
  margin:0;
}
div.nav{
  position:fixed;
  width:50%;
  margin:1%;
}
div.content{
  margin-left:50%;
}
@media only screen and (max-width: 650px) {
  body {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
  }
  div.content{
    background-color: blue;
    width:100%;
    margin-top:110px;
    margin-left:0%;
    overflow:hidden;
  }
  div.nav{
    background-color:yellow;
    width:100%;
    height:100px;
    margin:0%;
    overflow-y:scroll;
   
  }
}
</style>

<body>

<div class="nav">
  
    <nav id="navbar">
      <header>C PROGRAMMING LANGUAGE</header>
      <ul>
        <li><a href="#OVERVIEW" class="nav-link">OVERVIEW</a></li>
        <li><a href="#HISTORY" class="nav-link">HISTORY</a></li>
        <li><a href="#K_AND_RC" class="nav-link">K AND RC</a></li>
        <li><a href="#C_STANDARDS" class="nav-link">C STANDARDS</a></li>
        <li><a href="#SYNTAX" class="nav-link">SYNTAX</a></li>
        <li><a href="#RESERVED_WORDS" class="nav-link">RESERVED WORDS</a></li>
        <li><a href="#OPERATORS" class="nav-link">OPERATORS</a></li>
        <li><a href="#HELLO_WORLD" class="nav-link">HELLO WORLD</a></li>
        <li><a href="#DATATYPES" class="nav-link">DATATYPES</a></li>
        <li><a href="#MEMORY_MANAGEMENT" class="nav-link">MEMORY MANAGEMENT</a>
        <li><a href="#LIBRARIES" class="nav-link">LIBRARIES</a></li>
        <li><a href="#RELATED_LANGUAGES" class="nav-link">RELATED LANGUAGES</a></li>
        
       </ul>
    </nav>
 </div>
    
   <main id="main-doc">
    <!-- the content part on the right -->
  
  <div class="content">
   <!-- the purpose of the above div is to satisfy the flex properties and document nav on the        left and contents on the right -->
   <section class="main-section" id="OVERVIEW">
     <header>OVERVIEW</header>
     
     <!-- the purpose of the above div is to seperate each and every part of the contents so that       each content part can be styled individually and these divisions should not be wrapped like       flex and need to do something about it, probably display = block for the content div should       will solve-->
     
     <code>
x = 5;<br>
y = 6;<br>
z = x + y;
</code>
     <code>
x = 5;<br>
y = 6;<br>
z = x + y;
</code>
     <code>
x = 5;<br>
y = 6;<br>
z = x + y;
</code>
     <code>
x = 5;<br>
y = 6;<br>
z = x + y;
</code>
     <code>
x = 5;<br>
y = 6;<br>
z = x + y;
</code>
     <p>Like most procedural languages in the ALGOL tradition, C has facilities for structured programming and allows lexical variable scope and recursion. Its static type system prevents unintended operations. In C, all executable code is contained within subroutines (also called "functions", though not strictly in the sense of functional programming). Function parameters are always passed by value. Pass-by-reference is simulated in C by explicitly passing pointer values. C program source text is free-format, using the semicolon as a statement terminator and curly braces for grouping blocks of statements.<p>

<b>The C language also exhibits the following characteristics:</b>
<p>
  <ul>
    
<li>The language has a small, fixed number of keywords, including a full set of control flow primitives: if/else, for, do/while, while, and switch. User-defined names are not distinguished from keywords by any kind of sigil.</li>
<li>It has a large number of arithmetic, bitwise, and logic operators: +, +=, ++, &, ||, etc.
  More than one assignment may be performed in a single statement.</li>
<li>Functions:
Function return values can be ignored, when not needed.
Function and data pointers permit ad hoc run-time polymorphism.
  Functions may not be defined within the lexical scope of other functions.</li>
<li>Data typing is static, but weakly enforced; all data has a type, but implicit conversions are possible.</li>
<li>Declaration syntax mimics usage context. C has no "define" keyword; instead, a statement beginning with the name of a type is taken as a declaration. There is no "function" keyword; instead, a function is indicated by the presence of a parenthesized argument list.</li>
User-defined (typedef) and compound types are possible.</li>
<li>Heterogeneous aggregate data types (struct) allow related data elements to be accessed and assigned as a unit.</li>
<li>Union is a structure with overlapping members; only the last member stored is valid.</li>
<li>Array indexing is a secondary notation, defined in terms of pointer arithmetic. Unlike structs, arrays are not first-class objects: they cannot be assigned or compared using single built-in operators. There is no "array" keyword in use or definition; instead, square brackets indicate arrays syntactically, for example month[11].</li>
<li>Enumerated types are possible with the enum keyword. They are freely interconvertible with integers.</li>
<li>Strings are not a distinct data type, but are conventionally implemented as null-terminated character arrays.</li>
<li>Low-level access to computer memory is possible by converting machine addresses to typed pointers.</li>
<li>Procedures (subroutines not returning values) are a special case of function, with an untyped return type void.</li>
<li>A preprocessor performs macro definition, source code file inclusion, and conditional compilation.</li>
<li>There is a basic form of modularity: files can be compiled separately and linked together, with control over which functions and data objects are visible to other files via static and extern attributes.</li>
<li>Complex functionality such as I/O, string manipulation, and mathematical functions are consistently delegated to library routines.</li>
<li>While C does not include certain features found in other languages (such as object orientation and garbage collection), these can be implemented or emulated, often through the use of external libraries (e.g., the GLib Object System or the Boehm garbage collector)</li>.
 </p>
 <p>
<b>Relations to other languages</b>
Many later languages have borrowed directly or indirectly from C, including C++, C#, Unix's C shell, D, Go, Java, JavaScript (including transpilers), Limbo, LPC, Objective-C, Perl, PHP, Python, Rust, Swift, Verilog and SystemVerilog (hardware description languages).[4] These languages have drawn many of their control structures and other basic features from C. Most of them (Python being a dramatic exception) also express highly similar syntax to C, and they tend to combine the recognizable expression and statement syntax of C with underlying type systems, data models, and semantics that can be radically different.<p>
     </section>


<section id="HISTORY" class="main-section">
 <header>HISTORY</header>
   
     The origin of C is closely tied to the development of the Unix operating system, originally implemented in assembly language on a PDP-7 by Dennis Ritchie and Ken Thompson, incorporating several ideas from colleagues. Eventually, they decided to port the operating system to a PDP-11. The original PDP-11 version of Unix was also developed in assembly language.[9]


   </section>
   <section id="K_AND_RC" class="main-section">
 <header> K AND RC </header>
    
     
  <b>K&R C</b>

The second edition of the book[13] covers the later ANSI C standard, described below.

<p>K&R introduced several language features:

Standard I/O library
long int data type
unsigned int data type
Compound assignment operators of the form =op (such as =-) were changed to the form op= (that is, -=) to remove the semantic ambiguity created by constructs such as i=-10, which had been interpreted as i =- 10 (decrement i by 10) instead of the possibly intended i = -10 (let i be -10).
Even after the publication of the 1989 ANSI standard, for many years K&R C was still considered the "lowest common denominator" to which C programmers restricted themselves when maximum portability was desired, since many older compilers were still in use, and because carefully written K&R C code can be legal Standard C as well.

In early versions of C, only functions that return types other than int must be declared if used before the function definition; functions used without prior declaration were presumed to return type.</p>
   </section>
    <section  id="C_STANDARDS" class="main-section">
      <header>C STANDARDS</header>     
     
     <p><b>ANSI C and ISO C</b>
Main article: ANSI C


In 2008, the C Standards Committee published a technical report extending the C language[18] to address these issues by providing a common standard for all implementations to adhere to. It includes a number of features not available in normal C, such as fixed-point arithmetic, named address spaces, and basic I/O hardware addressing.</p>
    </section>
 <section  id="SYNTAX" class="main-section">
<header>SYNTAX</header>
   
    <p>The C standard.[19] Line endings are generally not significant in C; however, line boundaries do have significance during the preprocessing phase. Comments may appear either between the delimiters /* and */, or (since C99) following // until the end of the line. Comments delimited by /* and */ do not nest, and these sequences of characters are not interpreted as comment delimiters if they appear inside string or character literals.[20]

C source files contain declarations and function definitions. Function definitions, in turn, contain declarations and statements. Declarations either define new types using keywords such as struct, union, and enum, or assign types to and perhaps reserve storage for new variables, usually by writing the type followed by the variable name. Keywords such as char and int specify built-in types. Sections of code are enclosed in braces ({ and }, sometimes called "curly brackets") to limit the scope of declarations and to act as a single statement for control structures.

As an imperative language, C uses statements to specify actions. The most common statement is an expression statement, consisting of an expression to be evaluated, followed by a semicolon; as a side effect of the evaluation, functions may be called and variables may be assigned new values. To modify the normal sequential execution of statements, C provides several control-flow statements identified by reserved keywords. Structured programming is supported by if(-else) conditional execution and by do-while, while, and for iterative execution (looping). The for statement has separate initialization, testing, and reinitialization expressions, any or all of which can be omitted. break and continue can be used to leave the innermost enclosing loop statement or skip to its reinitialization. There is also a non-structured goto statement which branches directly to the designated label within the function. switch selects a case to be executed based on the value of an integer expression.

Expressions can use a variety of built-in operators and may contain function calls. The order in which arguments to functions and operands to most operators are evaluated is unspecified. The evaluations may even be interleaved. However, all side effects (including storage to variables) will occur before the next "sequence point"; sequence points include the end of each expression statement, and the entry to and return from each function call. Sequence points also occur during evaluation of expressions containing certain operators (&&, ||, ?: and the comma operator). This permits a high degree of object code optimization by the compiler, but requires C programmers to take more care to obtain reliable results than is needed for other programming languages.

Kernighan and Ritchie say in the Introduction of The C Programming Language: "C, like any other language, has its blemishes. Some of the operators have the wrong precedence; some parts of the syntax could be better."[21] The C standard did not attempt to correct many of these blemishes, because of the impact of such changes on already existing software.</p>
   
   </section>
    <section  id="RESERVED_WORDS" class="main-section">
     <header>RESERVED WORDS</header>
     <p>
       C89 has 32 reserved words, also known as keywords, which are the words that cannot be used for any purposes other than those for which they are predefined:

auto
break
case
char
const
continue
default
do
double
else
enum
extern
float
for
goto
if
int
long
register
return
short
signed
sizeof
static
struct
switch
typedef
union
unsigned
void
volatile
while
C99 reserved five more words:

_Bool
_Complex
_Imaginary
inline
restrict
C11 reserved seven more words:[22]

_Alignas
_Alignof
_Atomic
_Generic
_Noreturn
_Static_assert
_Thread_local
     </p>
     

   </section>
  <section  id="OPERATORS" class="main-section">
     <header>OPERATORS</header>

   
     <p>
       
       C supports a rich set of operators, which are symbols used within an expression to specify the manipulations to be performed while evaluating that expression. C has operators for:

arithmetic: +, -, *, /, %
assignment: =
augmented assignment: +=, -=, *=, /=, %=, &=, |=, ^=, <<=, >>=
bitwise logic: ~, &, |, ^
bitwise shifts: <<, >>
boolean logic: !, &&, ||
conditional evaluation: ? :
equality testing: ==, !=
calling functions: ( )
increment and decrement: ++, --
member selection: ., ->
object size: sizeof
order relations: <, <=, >, >=
reference and dereference: &, *, [ ]
sequencing: ,
subexpression grouping: ( )
type conversion: (typename)
C uses the operator = (used in mathematics to express equality) to indicate assignment, following the precedent of Fortran and PL/I, but unlike ALGOL and its derivatives. C uses the operator == to test for equality. The similarity between these two operators (assignment and equality) may result in the accidental use of one in place of the other, and in many cases, the mistake does not produce an error message (although some compilers produce warnings). For example, the conditional expression if (a == b + 1) might mistakenly be written as if (a = b + 1), which will be evaluated as true if a is not zero after the assignment.[24]

The C operator precedence is not always intuitive. For example, the operator == binds more tightly than (is executed prior to) the operators & (bitwise AND) and | (bitwise OR) in expressions such as x & 1 == 0, which must be written as (x & 1) == 0 if that is the coder's intent.[25]
     </p>
   </section>
   <section  id="HELLO_WORLD" class="main-section">
     <header>HELLO WORLD</header>

   de indicating successful execution.[27]
     </p>
   </section>
   <section  id="DATATYPES" class="main-section">
     <header>DATATYPES</header>

     <p>
       






Since arrays are always accessed (in effect) via pointers, array accesses are typically not checked against the underlying array size, although some compilers may provide bounds checking as an option.[30][31] Array bounds violations are therefore possible and rather common in carelessly written code, and can lead to various repercussions, including illegal memory accesses, corruption of data, buffer overruns, and run-time exceptions. If bounds checking is desired, it must be done manually.

C does not have a special provision for declaring multi-dimensional arrays, but rather relies on recursion within the type system to declare arrays of arrays, which effectively accomplishes the same thing. The index values of the resulting "multi-dimensional array" can be thought of as increasing in row-major order.

Multi-dimensional arrays are commonly used in numerical algorithms (mainly from applied linear algebra) to store matrices. The structure of the C array is well suited to this particular task. However, since arrays are passed merely as pointers, the bounds of the array must be known fixed values or else explicitly passed to any subroutine that requires them, and dynamically sized arrays of arrays cannot be accessed using double indexing. (A workaround for this is to allocate the array with an additional "row vector" of pointers to the columns.)

C99 introduced "variable-length arrays" which address some, but not all, of the issues with ordinary C arrays.

Array–pointer interchangeability
The subscript notation x[i] (where x designates a pointer) is syntactic sugar for *(x+i).[32] Taking advantage of the compiler's knowledge of the pointer type, the address that x + i points to is not the base address (pointed to by x) incremented by i bytes, but rather is defined to be the base address incremented by i multiplied by the size of an element that x points to. Thus, x[i] designates the i+1th element of the array.

Furthermore, in most expression contexts (a notable exception is as operand of sizeof), the name of an array is automatically converted to a pointer to the array's first element. This implies that an array is never copied as a whole when named as an argument to a function, but rather only the address of its first element is passed. Therefore, although function calls in C use pass-by-value semantics, arrays are in effect passed by reference.

The size of an element can be determined by applying the operator sizeof to any dereferenced element of x, as in n = sizeof *x or n = sizeof x[0], and the number of elements in a declared array A can be determined as sizeof A / sizeof A[0]. The latter only applies to array names: variables declared with subscripts (int A[20]). Due to the semantics of C, it is not possible to determine the entire size of arrays through pointers to arrays or those created by dynamic allocation (malloc); code such as sizeof arr / sizeof arr[0] (where arr designates a pointer) will not work since the compiler assumes the size of the pointer itself is being requested.[33][34] Since array name arguments to sizeof are not converted to pointers, they do not exhibit such ambiguity. However, arrays created by dynamic allocation are accessed by pointers rather than true array variables, so they suffer from the same sizeof issues as array pointers.

Thus, despite this apparent equivalence between array and pointer variables, there is still a distinction to be made between them. Even though the name of an array is, in most expression contexts, converted into a pointer (to its first element), this pointer does not itself occupy any storage; the array name is not an l-value, and its address is a constant, unlike a pointer variable. Consequently, what an array "points to" cannot be changed, and it is impossible to assign a new address to an array name. Array contents may be copied, however, by using the memcpy function, or by accessing the individual elements.
     </p>
   </section>
      <section  id="MEMORY_MANAGEMENT" class="main-section">
     <header>MEMORY MANAGEMENT</header>

     <p>
       One of the most important functions of a programming language is to provide facilities for managing memory and the objects that are stored in memory. C provides three distinct ways to allocate memory for objects:[27]

Static memory allocation: space for the object is provided in the binary at compile-time; these objects have an extent (or lifetime) as long as the binary which contains them is loaded into memory.
Automatic memory allocation: temporary objects can be stored on the stack, and this space is automatically freed and reusable after the block in which they are declared is exited.
Dynamic memory allocation: blocks of memory of arbitrary size can be requested at run-time using library functions such as malloc from a region of memory called the heap; these blocks persist until subsequently freed for reuse by calling the library function realloc or free
These three approaches are appropriate in different situations and have various trade-offs. For example, static memory allocation has little allocation overhead, automatic allocation may involve slightly more overhead, and dynamic memory allocation can potentially have a great deal of overhead for both allocation and deallocation. The persistent nature of static objects is useful for maintaining state information across function calls, automatic allocation is easy to use but stack space is typically much more limited and transient than either static memory or heap space, and dynamic memory allocation allows convenient allocation of objects whose size is known only at run-time. Most C programs make extensive use of all three.

Where possible, automatic or static allocation is usually simplest because the storage is managed by the compiler, freeing the programmer of the potentially error-prone chore of manually allocating and releasing storage. However, many data structures can change in size at runtime, and since static allocations (and automatic allocations before C99) must have a fixed size at compile-time, there are many situations in which dynamic allocation is necessary.[27] Prior to the C99 standard, variable-sized arrays were a common example of this. (See the article on malloc for an example of dynamically allocated arrays.) Unlike automatic allocation, which can fail at run time with uncontrolled consequences, the dynamic allocation functions return an indication (in the form of a null pointer value) when the required storage cannot be allocated. (Static allocation that is too large is usually detected by the linker or loader, before the program can even begin execution.)

Unless otherwise specified, static objects contain zero or null pointer values upon program startup. Automatically and dynamically allocated objects are initialized only if an initial value is explicitly specified; otherwise they initially have indeterminate values (typically, whatever bit pattern happens to be present in the storage, which might not even represent a valid value for that type). If the program attempts to access an uninitialized value, the results are undefined. Many modern compilers try to detect and warn about this problem, but both false positives and false negatives can occur.

Another issue is that heap memory allocation has to be synchronized with its actual usage in any program in order for it to be reused as much as possible. For example, if the only pointer to a heap memory allocation goes out of scope or has its value overwritten before free() is called, then that memory cannot be recovered for later reuse and is essentially lost to the program, a phenomenon known as a memory leak. Conversely, it is possible for memory to be freed but continue to be referenced, leading to unpredictable results. Typically, the symptoms will appear in a portion of the program far removed from the actual error, making it difficult to track down the problem. (Such issues are ameliorated in languages with automatic garbage collection.)
     </p>
   </section>
      <section  id="LIBRARIES" class="main-section">
     <header>LIBRARIES</header>

     <p>
       The C programming language uses libraries as its primary method of extension. In C, a library is a set of functions contained within a single "archive" file. Each library typically has a header file, which contains the prototypes of the functions contained within the library that may be used by a program, and declarations of special data types and macro symbols used with these functions. In order for a program to use a library, it must include the library's header file, and the library must be linked with the program, which in many cases requires compiler flags (e.g., -lm, shorthand for "link the math library").[27]

The most common C library is the C standard library, which is specified by the ISO and ANSI C standards and comes with every C implementation (implementations which target limited environments such as embedded systems may provide only a subset of the standard library). This library supports stream input and output, memory allocation, mathematics, character strings, and time values. Several separate standard headers (for example, stdio.h) specify the interfaces for these and other standard library facilities.

Another common set of C library functions are those used by applications specifically targeted for Unix and Unix-like systems, especially functions which provide an interface to the kernel. These functions are detailed in various standards such as POSIX and the Single UNIX Specification.

Since many programs have been written in C, there are a wide variety of other libraries available. Libraries are often written in C because C compilers generate efficient object code; programmers then create interfaces to the library so that the routines can be used from higher-level languages like Java, Perl, and Python.[27]

File handling and streams
File input and output (I/O) is not part of the C language itself but instead is handled by libraries (such as the C standard library) and their associated header files (e.g. stdio.h). File handling is generally implemented through high-level I/O which works through streams. A stream is from this perspective a data flow that is independent of devices, while a file is a concrete device. The high level I/O is done through the association of a stream to a file. In the C standard library, a buffer (a memory area or queue) is temporarily used to store data before it's sent to the final destination. This reduces the time spent waiting for slower devices, for example a hard drive or solid state drive. Low-level I/O functions are not part of the standard C library but are generally part of "bare metal" programming (programming that's independent of any operating system such as most but not all embedded programming). With few exceptions, implementations include low-level I/O.

Language tools

This section needs additional citations for verification. Please help improve this article by adding citations to reliable sources. Unsourced material may be challenged and removed. (July 2014) (Learn how and when to remove this template message)
A number of tools have been developed to help C programmers find and fix statements with undefined behavior or possibly erroneous expressions, with greater rigor than that provided by the compiler. The tool lint was the first such, leading to many others.

Automated source code checking and auditing are beneficial in any language, and for C many such tools exist, such as Lint. A common practice is to use Lint to detect questionable code when a program is first written. Once a program passes Lint, it is then compiled using the C compiler. Also, many compilers can optionally warn about syntactically valid constructs that are likely to actually be errors. MISRA C is a proprietary set of guidelines to avoid such questionable code, developed for embedded systems.[35]

There are also compilers, libraries, and operating system level mechanisms for performing actions that are not a standard part of C, such as bounds checking for arrays, detection of buffer overflow, serialization, dynamic memory tracking, and automatic garbage collection.

Tools such as Purify or Valgrind and linking with libraries containing special versions of the memory allocation functions can help uncover runtime errors in memory usage.
     </p>
   </section>
      
    
    
    <section  id="RELATED_LANGUAGES" class="main-section">
     <header>RELATED LANGUAGES</header>

   
     C has both directly and indirectly influenced many later languages such as C#, D, Go, Java, JavaScript, Limbo, LPC, Perl, PHP, Python, and Unix's C shell.[40] The most pervasive influence has been syntactical, all of the languages mentioned combine the statement and (more or less recognizably) expression syntax of C with type systems, data models and/or large-scale program structures that differ from those of C, sometimes radically.

Several C or near-C interpreters exist, including Ch and CINT, which can also be used for scripting.

When object-oriented languages became popular, C++ and Objective-C were two different extensions of C that provided object-oriented capabilities. Both languages were originally implemented as source-to-source compilers; source code was translated into C, and then compiled with a C compiler.[41]

The C++ programming language was devised by Bjarne Stroustrup as an approach to providing object-oriented functionality with a C-like syntax.[42] C++ adds greater typing strength, scoping, and other tools useful in object-oriented programming, and permits generic programming via templates. Nearly a superset of C, C++ now supports most of C, with a few exceptions.

Objective-C was originally a very "thin" layer on top of C, and remains a strict superset of C that permits object-oriented programming using a hybrid dynamic/static typing paradigm. Objective-C derives its syntax from both C and Smalltalk: syntax that involves preprocessing, expressions, function declarations, and function calls is inherited from C, while the syntax for object-oriented features was originally taken from Smalltalk.

In addition to C++ and Objective-C, Ch, Cilk and Unified Parallel C are nearly supersets of C.
   
      </section>
 </div>
</main>
     
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<!-- 

Hello Camper!

For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding! 

- The freeCodeCamp Team 

-->

</body>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</html>

hi there,

instead to paste all your code here, better just share your pen link here, like your codepen link.

regards

Hey Sathish,

nice to meet you! :slightly_smiling_face:

I’ve edited your post for readability, because it was very hard to read.

You can use the “preformatted text” tool in the editor ( </> ) to add code.

Because you want to show us your whole project, please use a service like codepen and input your link here.

https://codepen.io/sathishsubramanikathiyavadi/pen/NWNNLbr. Sorry and Thank You. It accepted now. It doesn’t show error only when the width of the output divison is at it’s maximum and the html css js code sections are set to minimum ( left right ). I simply don’t know the reason. Though submitted and going to get Responsive certificate ( last project pending ). But knowing the reasons and why is important. Thanks for helping . May god bless us all.

https://codepen.io/sathishsubramanikathiyavadi/pen/NWNNLbr. Sorry and Thank You. It accepted now. It doesn’t show error only when the width of the output divison is at it’s maximum and the html css js code sections are set to minimum ( left right ). I simply don’t know the reason. Though submitted and going to get Responsive certificate ( last project pending ). But knowing the reasons and why is important. Thanks for helping . May god bless us all.