The image in the top left corner is not aligned properly with the menu

How can I ensure that the top left image (logo2.jpg) on my page stays aligned with the menu below it instead of shifting to the right?

Here is the link to the page for reference:

#logo {
margin:0 auto; width: 975px; position:relative;
}
#top {
position:relative; top:0px; left:0px; width:100%; height:95px;background:url("vocab_dosyalar/back2.jpg") top repeat-x;
}
#logoicerik {
position:absolute; top:2px; 
}
#logoicerik2 {
position:absolute; top:2px; left:357px;
}

    <div id="top">
         <div id="logo" >   
              <div id="logoicerik"><img src="vocab_dosyalar/logo2.jpg" alt="easylang" style="border:0px;"/></div>
              <div id="logoicerik2"><img src="vocab_dosyalar/slogan.jpg" alt="the easiest way to learn english"/></div>
              <div class="header-info" style=" margin-right:1px; margin-top:15px" ></div>
         </div>
    </div>
htmlcss

Answer №1

your box element has a setting of width: 960px, but your wrapper class is set to width: 990px

To ensure consistency, it's important that both elements have the same width. I suggest adjusting the width of the box element to be 990px as well.

.box {
  WIDTH: 990px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing HTML Documents with the Header Element

When HTML 5 was implemented, it brought along new semantic tags such as header and footer. I find myself puzzled on whether I should use the header tag directly or assign a class of "header". Which option is superior and why? ...

html

In the Twitter Bootstrap documentation, which element is utilized for the sidebar?

I'm curious about the most efficient method for creating a sidebar like this using Bootstrap 4. https://i.sstatic.net/3eKwN.png From what I can see, it appears to be a custom component designed specifically for the documentation page, rather than ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Creating a structured database for products with a myriad of features

Imagine you are creating a searchable price database for a local pricelist, and encounter a scenario like this: For instance: You are searching for the product "Businesscard." "Businesscard" is the main product, but within it there are variations such as ...

phphtmlmysqldatabaselaravel-5

Generating unique spreadsheet identifiers in an HTML file

When it comes to displaying a chart using Google Sheets, I encounter an issue where the data is sourced from the same spreadsheet: function updateChart() { var ui = HtmlService.createHtmlOutputFromFile('ChartLine').setWidth(1350).setHeight(550) ...

javascripthtmlgoogle-apps-scriptgoogle-visualization

The depth order of overlapping elements and the rotation effect achieved through

I have created some interactive flip cards using CSS and HTML with transitions Currently, when you hover over a card, it flips and enlarges. However, I am facing an issue with positioning the hovered card on top using z-index and relative position due to ...

htmlcsscss-transitions

What is the best way to create a collage of images with a random and unique arrangement?

Recently, I stumbled upon a website and was intrigued by the unique effect of images randomly appearing on the screen. I'm curious about how this effect can be achieved. Is it possible to use CSS Grid to divide the screen and designate some grid ite ...

javascripthtmlcssreactjs

Flexbox isn't lining up items horizontally as expected

I have been researching flexbox and it seems like it should display in a horizontal row by default. However, no matter what I try, I can't seem to get it to work as expected. I've included the code below. When I remove "display: flex;" from the C ...

htmlcssflexbox

Content that sticks to the footer

I've been utilizing the sticky footer solution found at: This is how the CSS appears: * { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; } .footer, .push { height: 4 ...

csssticky-footer

Attempting to retrieve the numerical value displayed on my range slider. (using Bootstrap 4 and JavaScript)

var slider = new Slider('#slider1',{ tooltip: 'always' }); //generate a password function passwordGenerator () { // how long is the password going to be? var passwordLength = document.getElementById('slider1').value; ...

javascripthtmlbootstrap-4rangeslider

Using JavaScript to manipulate an HTML canvas

I currently have an index.hTML file that is set up to display a canvas using the following code: <body> <canvas> </canvas> <script src="./JS/index.js" type="module"></script> </body> Within my JavaScript fi ...

javascripthtmlcanvashtml5-canvas

Unresponsive Radio Buttons in HTML

Have you ever encountered the issue where you can't seem to select radio buttons despite them having a confirmed name attribute? Here is an example of the HTML code: <div id="surveys-list" class="inline col-xs-12"><div> <div class="i ...

javascriptjqueryhtmlcssradio-button

Styling circles and text side by side with CSS

Hey there, I'm trying to create a CSS circle with text aligned to the right alongside it. Here's the code I've been using: <div class="circlearancione">Disponibile</div> .circlearancione{ background-color: red; border-c ...

cssalignmentshapesgeometrytext-alignment

Using jQuery to create overlapping images

Currently, I am working on an effect that involves overlapping images. The idea is that when a bar is clicked and dragged, the image underneath should reveal by adjusting its width. While my code functions, there are some glitches present. One issue is tha ...

javascripthtmljquerycss

PHP form for submitting image uploads

Having trouble uploading an image to a directory due to a form issue. After submitting the form, it gets redirected to the specified PHP file in the form action but doesn't seem to recognize that the form has been submitted. Check out the HTML code: ...

javascriptphpjqueryhtmlforms

What is the best way to position an image in the center of the screen with uniform margins around it?

Could someone please help me figure this out? I've been attempting for some time but can't seem to make it work with the bottom margin. This website in the fashion industry showcases what I'm trying to achieve: It's designed to be resp ...

javascriptjqueryhtmlcss

What is the best way to customize the link style for individual data links within a Highcharts network graph?

I am currently working on creating a Network Graph that visualizes relationships between devices and individuals in an Internet of Things environment. The data for the graph is extracted from a database, including information about the sender and receiver ...

javascriptcsschartshighcharts

PHP: Extracting the selected value from a dropdown menu and incorporating it into an HTML link

Initially, I created a dropdown list Yet, there is uncertainty surrounding how to incorporate the selected choice (variable) into the input of the HTML <p style="text-align:center"> COVID-19 Checker</p> <br> <label for ...

javascriptphphtmlbuttondropdown

Is there a way to compel the browser or JavaScript to delete/disregard a cached file?

I've encountered an issue with my Javascript program that extracts data from a text file and displays it in a table. The problem arises when I update the text file - the changes don't reflect on the table because the browser is caching the file. ...

javascripthtmlcaching

Using Angular to pass parameters to a function

When passing a parameter to the getActiveId function in the ng-click <span class="col ion-ios7-heart-outline center" ng- click="getActiveId({{activeSlide.selected}})"> The value turns to zero in the controller, but it is passed correctly after tes ...

javascriptjqueryhtmlcssangularjs

Is it possible to save any additions made to the DOM using JavaScript into local storage, so that it can be retrieved even after the page is reloaded?

Let's consider a scenario for testing purposes: you have a function that appends <li> elements inside an <ol> container, and you want to retain all the list items added. Is there a way to store them in Local Storage (or any other local sto ...

javascripthtmlcss