Currently experiencing an issue: The alignment of the footer text seems off. When using text-align center, it appears slightly left of center. Text-align left places it further to the left and text-align right works correctly.
Below is my relevant code:
.footer {
display: table-cell;
background-color: aqua;
width: 1000px;
max-width: 1000px;
margin: auto;
border: 5px solid #ccc;
margin-top: 30px;
line-height: 12px;
text-align: center;
}<footer>
<div class="footer">
<h2>Footer stuff</h2>
</div>
</footer>If this information suffices, I'd prefer to keep it concise. Let me know if more details are needed. Appreciate any assistance in advance.
EDIT: Revised version of my complete code snippet
Body {
background-color: darkred;
}
.header {
text-align: center;
width: 100%;
}
#navbar {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: darkblue;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#navbar li {
float: left;
}
#navbar li a {
display: block;
padding: 8px 160px;
font-weight: bold;
color: white;
border-right: 1px solid #ccc;
}
#navbar li a:hover {
color: #c00;
background-color: #fff;
}
.container {
background-color: aqua;
width: 100%;
max-width: 1000px;
margin-top: 50px;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
border: 5px solid #ccc;
text-align: center;
height: 100%; /* BE ADVISED! (????) */
}
#ipsumpic1 {
width: 150px;
float: right;
}
#ipsumpic2 {
width: 100px;
float: left;
}
#sidebarleft {
margin: 0px auto;
position: relative;
left: 1000px;
padding-top: 0px;
width: 240px;
float: left;
border: 5px solid #ccc;
background-color: aqua;
margin-top: -350px;
}
#sidebarright {
padding-top: 0px;
width: 240px;
float: right;
border: 5px solid #ccc;
background-color: aqua;
margin-top: -537px;
margin-right: 1100px;
}
.footer {
display: table;
background-color: aqua;
width: 1000px;
max-width: 1000px;
margin: auto;
border: 5px solid #ccc;
margin-top: 30px;
line-height: 12px;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<title>Amazing Website</title>
<meta charset="utf-8">
<link rel="Stylesheet"type="text/css" href="css/style.css">
<script type=text/javascript src="script.js"></script>
</head>
<body>
<header>
<div class="header">
<a href="index.html"><img src="img/logo.svg" width="200"></a>
</div>
</header>
<ul id="navbar">
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="container">
<main>
<h1>Lorem Ipsum</h1>
<img id="ipsumpic1" src="img/ipsum1.svg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a pulvinar dolor, a rutrum tortor. Vestibulum auctor finibus odio id efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ullamcorper risus neque, sed vehicula augue finibus sed. Donec pretium ornare libero a venenatis. Donec sed ex id tellus posuere interdum. Nullam tincidunt egestas odio non gravida. Sed ut felis aliquet eros commodo elementum. Aliquam ullamcorper, diam quis aliquet tempor, magna nisi laoreet nisl, at vestibulum arcu enim quis elit.</p>
<img id="ipsumpic2" src="img/ipsum2.svg">
<p>Ut faucibus dui lectus, vitae pharetra magna maximus quis. Donec sollicitudin sem non ornare vulputate. Suspendisse pretium lacus nec gravida tristique. Sed sed nibh et eros facilisis accumsan. Nam mi elit, fermentum eu laoreet vel, venenatis sit amet leo. Curabitur erat arcu, dictum eu massa quis, hendrerit mattis turpis. Etiam ultrices quam dolor, a interdum erat eleifend eu. Cras sed blandit nunc. In dictum dignissim enim, vel gravida nisl sagittis pellentesque. Quisque fermentum pellentesque velit a faucibus. Nulla facilisi. In fermentum, mi id feugiat ultricies, nulla lorem elementum felis, et pretium velit mauris sit amet odio. Curabitur facilisis, mi in eleifend commodo, enim ex dignissim quam, ut pulvinar magna nisl et orci. Duis pulvinar imperdiet pretium. Nullam vehicula tortor in ex volutpat egestas.</p>
</main>
<div id="sidebarleft">
<aside>
<h2>New News!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit leo, finibus sed risus eget, semper molestie lacus. Integer dictum laoreet erat a facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum luctus diam a est accumsan, eget maximus sem bibendum. Pellentesque efficitur tellus maximus elit egestas bibendum. Cras efficitur enim tortor, a fringilla lacus tristique quis. Pellentesque neque felis, faucibus nec nibh vel, dapibus congue lorem. Sed scelerisque ligula vitae convallis condimentum. Nulla a ante pulvinar, tristique turpis a, sagittis ipsum. Aliquam fringilla convallis justo, eu eleifend quam placerat ac. Füße sit amet turpis id lacus consectetur sollicitudin.</p>
</aside>
</div>
<div id="sidebarright">
<aside>
<h2>Social Media!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit leo, finibus sed risus eget, semper molestie lacus. Integer dictum laoreet erat a facilisis. Claseyptomsapacara asseytopicsidireqgransomans imeleasuatalista elleobitas bilegendasmd lefectecularcompuma.
Catsetueliqu allite precipspimusxe maltenembial ductalrestamusnetters bagante decidreumostratesal abivamentedsolespeschmarberis.
Cressifiermude trenefustoimenesto amidleo ferormdensmeletrom mealuminel facidephaestagiolla legiminremenusasan miriadiverrirevane lisleriultrique ronelementbrisva maiteriplavitatio oriyurevitamasana reloremnestad ormundo.-&
Jufactalixsonfelintrilismocuprimalectauquetotes standème parles Laenespinompelleneutekuscolitis numen...
Ernipetturiencimuasis uftexigestiber papeturiculture lonitusampeltaconcepidazza&ealtetribsed.'
Esolemenzet cuteademperetuiesni mestram quoceu nitempateuvatatluo oordolorem cercoles.micorespondement ha prevalarteroroutline alagitud Solitoassestament velemnignarerkezentopo tenarinvestacasnari cibirhorpeversistips verraspacialstraiveile cucontemanimine usacorporoyantemerofes caqualigmabenon desrgravableurdig-d Con antispmedienspiegantor peci'idsantsuggiebezzultuaiconvenzar encuentramerciafichigranciamontoce lamicaurefluentasmualestoninacladeiniviçei evlencontrvolvintirmaion-resplato cateproachisteomatorenimiop ensurvürakaldivelenteionaimporpasont'-
Merrniculumbrfermentresence ejulfaceschruintricosblasmerdecetcra combientemandble talafomaticadaiskividesintcomancejaacomaboquerimon Sinnvalendeinst unimetndserteroni GrasonvisuprofdioruDimeradsce Riartodicaden..."%
Atriocinsposprocoublendientes conservadoscabastreninterruptenderasar amisabortaquiplanconvirl normendtimebratesplerseenedinquirocid
Ellavorablitedotgesver "refficietafussinclumentablenRacyfire stercuridriftolificpartulos Dentrisbiezinerlibrearabititution...</p>
</aside>
</div>
</div>
<footer>
<div class="footer">
<h2>Footer content</h2>
</div>
</footer>
</body>
</html>