This is what I'm trying to get:
Here is my fiddle link to my code: http://jsfiddle.net/8fvLnutq/
body {
background-color: white;
text-align: center;
margin: 0;
border: 0;
font-family: cursive;
}
* {
box-sizing: border-box;
}
div {
margin : 0px;
}
section {
position: relative;
float: left;
background-color: grey;
border: 5px solid black;
margin: 10px;
padding: 10px;
text-align: left;
}
h3 {
position: absolute;
top: 0;
right: 0;
margin: 0;
}
article {
padding-top: 20px;
}
#Section-1 h3 {
background-color: blue;
color: white;
}
#Section-2 h3 {
background-color: red;
color: white;
}
#Section-3 h3 {
background-color: black;
color: white;
}
@media (min-width: 992px) {
section {
width: 33.33%;
/* border: 1px solid black; */
}
}
@media (min-width: 768px) and (max-width: 991px) {
section {
width: 50%;
}
#Section-3{
width: 100%;
}
}
@media (max-width: 767px) {
section {
width: 100%;
}
}<!DOCTYPE html>
<html>
<head>
<title>Types of meat</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css.css">
</head>
<body>
<h1>My Heading</h1>
<div>
<section id="Section-1">
<h3>
Chicken meat
</h3>
<article>
Chicken is the most common type of poultry in the world.[1] Owing to the relative ease and low cost of raising chickens—in comparison to mammals such as cattle or hogs—chicken meat (commonly called just "chicken") and chicken eggs have become prevalent in numerous cuisines.
</article>
</section>
<section id="Section-2">
<h3>
Lamb meet
</h3>
<article>
Lamb, hogget, and mutton, generically sheep meat,[1] are the meat of domestic sheep, Ovis aries. A sheep in its first year is a lamb and its meat is also lamb. The meat from sheep in their second year is hogget. Older sheep meat is mutton. Generally, "hogget" and "sheep meat" are not used by consumers outside Norway, New Zealand, South Africa, Scotland and Australia. Hogget has become more common in England, particularly in the North (Lancashire and Yorkshire) often in association with rare breed and organic farming.
</article>
</section>
<section id="Section-3">
<h3>
Beef Meat
</h3>
<article>
Beef is the culinary name for meat from cattle (Bos taurus).
In prehistoric times, humankind hunted aurochs and later domesticated them. Since that time, numerous breeds of cattle have been bred specifically for the quality or quantity of their meat. Today, beef is the third most widely consumed meat in the world, after pork and poultry. As of 2018, the United States, Brazil, and China were the largest producers of beef.
</article>
</section>
</div>
</body>
</html>Everything works as it should except of full screen resolution. Uppon I added the picture how the page should behave. When I open the site as a large screen, even if I set width of the box as 33.33%, and box-sizing as a border box, the page doesn't response. When I change margin to 0, then everything works. I don't understand a reason why it doesn't work. I would be very glad for some help.
