Here is the CSS code provided:
.wrapper{
display: inline;
line-height: 2em;
width: 100%;
height: 100%;
min-width: 1000px;
min-height: 1000px;
text-align: center;
}
ul{
list-style: none;
}
li{
list-style: none;
}
.craftbeers{
color: white;
margin-top: 85px;
display: inline-block;
}
.craftbeers h2{
margin-left: 40px;
}
.winetap{
color: white;
margin-top: 85px;
display: inline-block;
}
.winetap h2{
margin-left: 40px;
}
.spirits{
color: white;
margin-top: 85px;
display: inline-block;
}
.spirits li{
margin-left: -40px;
}
.other{
color: white;
margin-top: 85px;
margin-left: 95px;
line-height: 0.5em;
text-align: center;
}
Below is the HTML layout for the content:
<div class="wrapper">
<div class="craftbeers">
<h2>Craft Beers on Tap</h2>
<ul>
<li><bold>BrewDog</bold> Elvis Juice IPA (6.7%)... $7</li>
<li><bold>New Belgium</bold> Fat Tire Amber Ale (5.2%)... $5</li>
...
</ul>
</div>
... (more HTML content)
<div class="other">
<h3>Other</h3>
<p><bold>Flights:</bold> 4 wine flights.. $15.00... 3 wine flights.. $13.00</p>
<p><bold>Can't decide?</bold> All samples only $1.00!</p>
...
</div>
</div>
The content was originally designed to fit properly on Mac, but post editing, it no longer fits on Windows or Mac screens. Is a Media Query necessary for this adjustment? In addition, there seems to be confusion regarding the use of inline-block in classes and the wrapper. Should the Wrapper alone be set to display inline, or should each class be set as inline without using inline-block? The website domain related to this content can be accessed at .
Note: Please disregard the part related to ".wineglass". Any assistance or insights on these formatting issues would be greatly appreciated. Thank you.