How do I center this code in the middle of the page?

HTML & CSS
62

The HTML table has by default, cellspacing=“2” and cellpadding=“1” (attributes).
That would be the equivalent of

th,td {
    padding:1px;
}

and

table {
    border-spacing:2px;
}

The cellpadding has been accounted for in the padding applied to each of the cells. However, the cellspacing has not. You can set the cellspacing attribute to “0”, or use CSS and apply {border-spacing:0}.

<table cellspacing="0"  <!-- deprecated -->

or

table {
    border-spacing:0;   /* current standard, preferred */
}

then they will appear to be the same width on the screen.

63

Both table and flexbot are 368px, I’m going to check the width now.

64

Width:
1206 flexbot

1204 table

65

No they aren’t. Each item is 400px wide.

66

This is how I measured them:

The red line is the ruler

67

Which construct is this, the table or the flexbox?

68

That would be 1204 which is the table.

And the table is 1206. measured the same.

69

Have you added the following property to the table code? If not, add it, then measure again. It should be even narrower.

70

Did you answer this question already?

How do you keep flexbot from collapsing when you make the browser screen smaller?

71

Yes I did, several times.

72

That made it now, 1200

73

And that is EXACTLY what they should be!

74

Can I do the same thing to flexbot? And how?

75

The flexbox code here

http://codepen.io/dszdasdsa/pen/dXNVPr

measures exactly 1200px wide.

76

For the last time…

.container {
    width:1200px;    /* changed to width from max-width */
77

On blogger it’s 1206

78

set up like this?

.container {
    width:1200px;  
    max-width:1208px;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    margin:0 auto;

}
79

When I add that code I get this, and it stays like that. How do I prevent it from collapsing?

80

Still occurs when I Remove, max-width:1208px;

81 
.container {
    width:1200px;  
/*    max-width:1208px;  /* DELETE ME! forever */
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    margin:0 auto;
}