My .buttons section is not centered. I want it to be centered. Also when I try to make my window bigger or smaller it stays that way, it never centers, I already added align-items and justify-content to center but makes almost no change. thanks!
Snippet:
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/****************************/
h1 {
text-align: center;
}
html {
box-sizing: border-box;
/*! ????*/
font-family: 'Heebo', sans-serif;
}
h1 {
font-size: 2em;
padding: 10px;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
.container {
display: flex;
flex-direction: column;
max-width: 500px;
height: 450px;
width: 60%;
background-color: rgb(107, 111, 168);
border-radius: 10px;
border: 5px solid rgb(89, 93, 140);
border-bottom: 20px solid rgb(89, 93, 140);
align-items: center;
justify-content: center;
margin: 10px auto;
padding: 25px 5px 10px 5px;
/* Arriba | Derecha | Abajo | Izquierda */
/* flex: 1 2 250px; */
/* flex grow | flex shrink | flex bais*/
/*! ????*/
}
#display {
background-color: rgb(112, 234, 211);
border-radius: 15px;
padding: 25px;
font-size: 40px;
width: 75%;
margin: 5% auto;
border-bottom: 10px solid rgb(86, 176, 159);
text-align: right;
}
.buttons {
/* flex-flow: column wrap; */
flex-direction: column;
justify-content: center;
align-items: center;
/* Arriba | Derecha | Abajo | Izquierda */
justify-content: center;
align-items: center;
flex-shrink: 0;
/* flex grow | flex shrink | flex bais*/
font-family: 'Heebos', sans-serif;
width: 50%;
}
.button {
font-size: 30px;
/* text-align: center; */
border-radius: 15px;
color: black;
margin: 5px;
background-color: white;
width: 20%;
font-family: 'Heebos', sans-serif;
border: white;
border-bottom: 6px solid rgb(211, 211, 211);
}
/* flex:2 1 400px; */
/* takes twice amount of extra space */
#cl {
background-color: rgb(255, 42, 0);
border-bottom: 6px solid rgb(205, 34, 0);
}
#equals {
background-color: rgb(255, 136, 0);
border-bottom: 6px solid rgb(217, 116, 0);
width: 40%;
/* flex-shrink: 1; */
}
/* @media (max-width: 600px) {
.buttons {
width: 100%;
font-size: 20px;
}
#display {
font-size: 30px;
}
}<body>
<h1>Calculator</h1>
<div class="container">
<div id="display">0</div>
<section class="buttons">
<button class="button" id="cl">C</button>
<button class="button" id="percent">%</button>
<button class="button" type="button" id="sign">+/-</button>
<button class="button" id="div">/</button>
<button id="sevem" class="button">7</button>
<button id="eight" class="button">8</button>
<button id="nine" class="button">9</button>
<button class="button" id="mult">x</button>
<button id="four" class="button">4</button>
<button id="five" class="button">5</button>
<button id="six" class="button">6</button>
<button class="button" id="sub">-</button>
<button id="one" class="button">1</button>
<button id="two" class="button">2</button>
<button id="three" class="button">3</button>
<button class="button" id="add">+</button>
<button id="zero" class="button">0</button>
<button id="dot" class="button">.</button>
<button class="button" id="equals">=</button>
</section>
</div>
</body>
Here is my code: html:
**<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@615&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>Calculator</h1>
<div class="container">
<div id="display">0</div>
<section class="buttons" >
<button class="button" id="cl">C</button>
<button class="button" id="percent">%</button>
<button class="button" type="button" id="sign">+/-</button>
<button class="button" id="div">/</button>
<button id="sevem" class="button">7</button>
<button id="eight" class="button">8</button>
<button id="nine" class="button">9</button>
<button class="button" id="mult">x</button>
<button id="four" class="button">4</button>
<button id="five" class="button">5</button>
<button id="six" class="button">6</button>
<button class="button" id="sub">-</button>
<button id="one" class="button">1</button>
<button id="two" class="button">2</button>
<button id="three" class="button">3</button>
<button class="button" id="add">+</button>
<button id="zero" class="button">0</button>
<button id="dot" class="button">.</button>
<button class="button" id="equals">=</button>
</section>
</div>
<script src="index.js"></script>
</body>
</html>**
css:
**/* path: live-server --no-css-inject */
html, body, div, span, applet, object, iframe, h1, h2,
h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark, audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header,
hgroup, menu, nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/****************************/
h1 {
text-align: center;
}
html {
box-sizing: border-box;
/*! ????*/
font-family: 'Heebo', sans-serif;
}
h1 {
font-size: 2em;
padding: 10px;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
.container {
display: flex;
flex-direction: column;
max-width: 500px;
height: 450px;
width: 60%;
background-color: rgb(107, 111, 168);
border-radius: 10px;
border: 5px solid rgb(89, 93, 140);
border-bottom: 20px solid rgb(89, 93, 140);
align-items: center;
justify-content: center;
margin: 10px auto;
padding: 25px 5px 10px 5px;
/* Arriba | Derecha | Abajo | Izquierda */
/* flex: 1 2 250px; */
/* flex grow | flex shrink | flex bais*/
/*! ????*/
}
#display {
background-color: rgb(112, 234, 211);
border-radius: 15px;
padding: 25px;
font-size: 40px;
width: 75%;
margin: 5% auto;
border-bottom: 10px solid rgb(86, 176, 159);
text-align: right;
}
.buttons {
/* flex-flow: column wrap; */
flex-direction: column;
justify-content: center;
align-items: center;
/* Arriba | Derecha | Abajo | Izquierda */
justify-content: center;
align-items: center;
flex-shrink: 0;
/* flex grow | flex shrink | flex bais*/
font-family: 'Heebos', sans-serif;
width: 50%;
}
.button {
font-size: 30px;
/* text-align: center; */
border-radius: 15px;
color: black;
margin: 5px;
background-color: white;
width: 20%;
font-family: 'Heebos', sans-serif;
border: white;
border-bottom: 6px solid rgb(211, 211, 211);
}
/* flex:2 1 400px; */
/* takes twice amount of extra space */
#cl {
background-color: rgb(255, 42, 0);
border-bottom: 6px solid rgb(205, 34, 0);
}
#equals {
background-color: rgb(255, 136, 0);
border-bottom: 6px solid rgb(217, 116, 0);
width: 40%;
/* flex-shrink: 1; */
}
/* @media (max-width: 600px) {
.buttons {
width: 100%;
font-size: 20px;
}
#display {
font-size: 30px;
}
} */**
