Solution 1 :

You did right, just one mistake – you didn’t account padding in your width. Please try.

 /* Create two columns/boxes that floats next to each other */
      nav {
        float: left;
        width: calc(30% - 40px);
        height: 300px; /* only for demonstration, should be removed */
        background: #ccc;
        padding: 20px;
      }



      article {
        float: left;
        padding: 20px;
        width: calc(70% - 40px);
        background-color: #f1f1f1;
        height: 300px; /* only for demonstration, should be removed */
      }

      /* Clear floats after the columns */
      section:after {
        content: "";
        display: table;
        clear: both;
      }



      /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
      @media (max-width: 600px) {
        nav, article {
          width: 100%;
          height: auto;
        }
      }
<header class="header header-default header">
    <div class="container-fluid">
        <div class="header-header">
            <a class="header-brand" href="#">
                <img></img></a>
            </a>
            <h1>My application</h1>
        </div>
    </div>
</header>
<section>
    <nav>
        <label for='Date'>Choose the booking date:</label>

        <input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
        <input class="btn btn-success" type='button' id='submit' value='Submit'>
    </nav>
    <article>
        <div>
            <p></p>
        </div>
    </article>

</section>

Solution 2 :

I’m sure that you do need the padding, so I’d suggest just removing the float: left; and width: 70%; in your article and let it fill the rest of the place automatically :

section {
  max-width: 100%;
}

nav {
  float: left;
  width: 30%;
  height: 300px;
  /* only for demonstration, should be removed */
  background: #ccc;
  padding: 20px;
}

article {
  padding: 20px;
  background-color: #f1f1f1;
  height: 300px;
  /* only for demonstration, should be removed */
}


/* Clear floats after the columns */

section:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */

@media (max-width: 600px) {
  nav,
  article {
    width: 100%;
    height: auto;
  }
}
<header class="header header-default header">
  <div class="container-fluid">
    <div class="header-header">
      <h1>My application</h1>
    </div>
  </div>
</header>
<section>
  <nav>
    <label for='Date'>Choose the booking date:</label>

    <input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
    <input class="btn btn-success" type='button' id='submit' value='Submit'>
  </nav>
  <article>
    <div>
      <p></p>
    </div>
  </article>

</section>

Solution 3 :

Thanks I have found the solutions for it. I have added the margin-left and margin-right auto in section after. But Now what I tried is I have added these two lines in the sections.

section {
       max-width: 80%;
       margin-right: auto;
       margin-left: auto;
     }  
 I didn't do any changes other than this and it worked.

Solution 4 :

I’ve added a separate variant with a flexbox. It’s easy to implement and you need to worry about width and paddings.

 /* Create two columns/boxes that floats next to each other */
 section {
   display: flex;
   flex-direction: row;
 }
 
 nav {
   /* only for demonstration, should be removed */
   background: #ccc;
   padding: 20px;
   min-width: 30%;
 }

 article {
   padding: 20px;
   background-color: #f1f1f1;
   flex-grow: 1;
 }


 /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
 @media (max-width: 600px) {

   section {
   flex-direction: column;
   }
 }
<header class="header header-default header">
  <div class="container-fluid">
    <div class="header-header">
      <a class="header-brand" href="#">
        <img src="" alt="">
      </a>
      <h1>My application</h1>
    </div>
  </div>
</header>
<section>
  <nav>
    <label for='Date'>Choose the booking date:</label>
    <input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
    <input class="btn btn-success" type='button' id='submit' value='Submit'>
  </nav>
  <article>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et ligula orci. Quisque in diam quis risus pellentesque sagittis sed sit amet mauris. Nullam ante nulla, pulvinar sit amet efficitur vitae, porttitor et est. Donec bibendum massa feugiat aliquet rutrum. Maecenas et ante vitae dolor dapibus luctus. Sed eget risus nisi. Praesent ultrices velit eu nisi faucibus ultrices. Suspendisse in facilisis odio.
      </p>
      <p> Donec at odio sit amet nulla bibendum ornare pulvinar vitae nulla. Curabitur eu erat et nulla vehicula porta. Curabitur quis luctus magna. Nullam vestibulum pretium risus eget accumsan. Nullam commodo turpis massa, tincidunt tempus lacus maximus non. Pellentesque facilisis finibus urna ut volutpat. Etiam placerat urna at venenatis bibendum.</p>
    </div>
  </article>
</section>

Problem :

I have the page which has section, nav, article. The section contains nav and article. As of now the nav and article occupy the full page. But what I need is the article and nav should be in the center of the page.
What I referred to is https://www.w3schools.com/html/html_layout.asp and developed the web page.
My html code looks like this

<header class="header header-default header">
    <div class="container-fluid">
        <div class="header-header">
            <a class="header-brand" href="#">
                <img></img></a>
            </a>
            <h1>My application</h1>
        </div>
    </div>
</header>
<section>
    <nav>
        <label for='Date'>Choose the booking date:</label>

        <input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
        <input class="btn btn-success" type='button' id='submit' value='Submit'>
    </nav>
    <article>
        <div>
            <p></p>
        </div>
    </article>

</section>

My css looks like this

 /* Create two columns/boxes that floats next to each other */
      nav {
        float: left;
        width: 30%;
        height: 300px; /* only for demonstration, should be removed */
        background: #ccc;
        padding: 20px;
      }



      article {
        float: left;
        padding: 20px;
        width: 70%;
        background-color: #f1f1f1;
        height: 300px; /* only for demonstration, should be removed */
      }

      /* Clear floats after the columns */
      section:after {
        content: "";
        display: table;
        clear: both;
      }



      /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
      @media (max-width: 600px) {
        nav, article {
          width: 100%;
          height: auto;
        }
      }

By refering this CSS Getting The Article Center have included margin-left: auto; margin-right: auto; in the ‘section’

 section:after {
        content: "";
        display: table;
        clear: both;
margin-left: auto; 
margin-right: auto;

It didnt give me the expected output what i want.
The expected output is:
The nav and article should be in the middle of the page.

<html>

<head>


    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="C:Users/annap/code/interview-scheduler/qxf2_scheduler/static/css/qxf2_scheduler.css" rel="stylesheet">
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <style>
         /* Create two columns/boxes that floats next to each other */
      nav {
        float: left;
        width: 30%;
        height: 300px; /* only for demonstration, should be removed */
        background: #ccc;
        padding: 20px;
      }



      article {
        float: left;
        padding: 20px;
        width: 70%;
        background-color: #f1f1f1;
        height: 300px; /* only for demonstration, should be removed */
      }

      /* Clear floats after the columns */
      section:after {
        content: "";
        display: table;
        clear: both;
      }



      /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
      @media (max-width: 600px) {
        nav, article {
          width: 100%;
          height: auto;
        }
      }

    </style>

</head>
<body>
<header class="header header-default header">
    <div class="container-fluid">
        <div class="header-header">
            <a class="header-brand" href="#">
                <img></img></a>
            </a>
            <h1>My application</h1>
        </div>
    </div>
</header>
<section>
    <nav>
        <label for='Date'>Choose the booking date:</label>

        <input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
        <input class="btn btn-success" type='button' id='submit' value='Submit'>
    </nav>
    <article>
        <div>
            <p></p>
        </div>
    </article>

</section>

</body>
</html>

What I need is the choose the booking date(nav) and the article should be in middle leaving the space in the left and right. As of now, you can see it's the full width of the page

Comments

Comment posted by Alexandre Elshobokshy

Please create a working SO snippet

Comment posted by Code_Ninja

@GuruKrishna use the button

Comment posted by Dmytro Cheglakov

What do you mean? Did you add width: calc for nav as well?

By